Question

Technologies:

javascript

typescript

Tolerim

an hour ago

In Angular 14, the error message "ERROR NG8001: ReadyToTalkComponent is not a known element - Already Declared in NgModule" is displayed.

Following my upgrade to Angular 14, I came across several errors, most of which were with an unknown element. The component's name was already stated under @NgModule in the Declarations section. Please view the details below. Executing the command ng version produced the following output:


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

Here's the code for shared.module.ts:

import {NgModule, CUSTOMELEMENTSSCHEMA } from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReadyToTalkComponent} from './common/ready-to-talk/ready-to-talk.component';

@NgModule({
  schemas: [CUSTOMELEMENTSSCHEMA],
  imports: [SOMEMODULESHERE],
  declarations: [ ReadyToTalkComponent ],
  exports: [ ReadyToTalkComponent ]
})

export class SharedModule {}

And here's the code for app.module.ts:

import { SharedModule } from './shared.module';

@NgModule({
  declarations: [SOME_COMPONENTS],
  imports: [ SharedModule ],
  providers: [SOME_SERVICES],
  bootstrap: [AppComponent]
})
export class AppModule { }

The code for webinar.component.html is as follows:

<app-ready-to-talk></app-ready-to-talk>

And finally, here's the code for ready-to-talk.component.ts:

@Component({
  selector: 'app-ready-to-talk',
  templateUrl: './ready-to-talk.component.html',
  styleUrls: ['./ready-to-talk.component.scss']
})

When executing my code, I received the following error:

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 'CUSTOMELEMENTSSCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I'm uncertain whether placing schemas: [CUSTOMELEMENTSSCHEMA] under app.module.ts will solve the issue since it already appears in Shared Module. Thanks!

Answers(1)

Accepted Answer

It looks like the ReadyToTalkComponent is declared and exported from the SharedModule, which is then imported in the AppModule. However, when trying to use the ReadyToTalkComponent in the WebinarComponent template, you're getting the error that it's not a known element. One thing to double-check is that the SharedModule is imported correctly in the AppModule. It's possible that there's a typo or some other mistake. Assuming that the import is correct, it's possible that the issue is related to the order of imports in the AppModule. Make sure that the SharedModule is imported before any components that use its exported components. If a component is imported before its dependencies are available, you may see errors that a component isn't a known element. In any case, adding the schemas: [CUSTOM_ELEMENTS_SCHEMA] to the AppModule won't solve the problem, since the ReadyToTalkComponent is declared in the SharedModule.