Upon updating to Angular 14, I ran into numerous errors, most of which were related to unknown elements. Despite declaring the component name under @NgModule in Declarations, the issues persisted. See the information below.
ng version
Angular CLI: 14.2.11
Node: 14.20.1
Package Manager: npm 6.14.17
OS: darwin x64
Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.11
@angular-devkit/build-angular 14.2.11
@angular-devkit/core 15.2.8
@angular-devkit/schematics 15.2.8
@angular/cdk 14.2.7
@angular/cli 14.2.11
@angular/fire 7.5.0
@angular/material 14.2.7
@ngtools/webpack 14.2.11
@nguniversal/express-engine 14.2.3
@schematics/angular 15.2.8
rxjs 7.5.7
typescript 4.8.4
shared.module.ts
import {NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReadyToTalkComponent} from './common/ready-to-talk/ready-to-talk.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [SOME_MODULES_HERE],
declarations: [ ReadyToTalkComponent ],
exports: [ ReadyToTalkComponent ]
})
export class SharedModule {}
app.module.ts
import { SharedModule } from './shared.module';
@NgModule({
declarations: [SOME_COMPONENTS],
imports: [ SharedModule ],
providers: [SOME_SERVICES],
bootstrap: [AppComponent]
})
export class AppModule { }
webinar.component.html
<app-ready-to-talk></app-ready-to-talk>
ready-to-talk.component.ts
@Component({
selector: 'app-ready-to-talk',
templateUrl: './ready-to-talk.component.html',
styleUrls: ['./ready-to-talk.component.scss']
})
ERROR MESSAGE
Error: src/app/webinar/webinar.component.html:148:1 - error NG8001: 'app-ready-to-talk' is not a known element:
1. If 'app-ready-to-talk' is an Angular component, then verify that it is part of this module.
2. If 'app-ready-to-talk' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Adding
schemas: [CUSTOM_ELEMENTS_SCHEMA]Thank you!
EDITED:
I found that setting "aot": false in angular.json eliminated the above error.