Angular 2 'component' is not a known element

Question

I'm trying to use a component I created inside the AppModule in other modules. I get the following error though:

"Uncaught (in promise): Error: Template parse errors:

'contacts-box' is not a known element:

1. If 'contacts-box' is an Angular component, then verify that it is part of this module.
2. If 'contacts-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

My project structure is quite simple:

I keep my pages in pages directory, where each page is kept in different module (e.g. customers-module) and each module has multiple components (like customers-list-component, customers-add-component and so on). I want to use my ContactBoxComponent inside those components (so inside customers-add-component for example).

As you can see I created the contacts-box component inside the widgets directory so it's basically inside the AppModule. I added the ContactBoxComponent import to app.module.ts and put it in declarations list of AppModule. It didin't work so I googled my problem and added ContactBoxComponent to export list as well. Didn't help. I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

What am I missing?

Solution 1

These are the 5 steps I perform when I get such an error.

• Are you sure the name is correct? (Also check the selector defined in the component)
• Declare the component in a module?
• If it is in another module, export the component?
• If it is in another module, import that module?
• Restart the cli?

When the error occurs during unit testing, make sure your declared the component or imported the module in TestBed.configureTestingModule

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

You can't declare a component twice. You should declare and export your component in a new separate module. Next you should import this new module in every module you want to use your component.

It is hard to tell when you should create new module and when you shouldn't. I usually create a new module for every component I reuse. When I have some components that I use almost everywhere I put them in a single module. When I have a component that I don't reuse I won't create a separate module until I need it somewhere else.

Though it might be tempting to put all you components in a single module, this is bad for the performance. While developing, a module has to recompile every time changes are made. The bigger the module (more components) the more time it takes. Making a small change to big module takes more time than making a small change in a small module.

Solution 2

I had a similar issue. It turned out that ng generate component (using CLI version 7.1.4) adds a declaration for the child component to the AppModule, but not to the TestBed module that emulates it.

The "Tour of Heroes" sample app contains a HeroesComponent with selector app-heroes. The app ran fine when served, but ng test produced this error message: 'app-heroes' is not a known element. Adding the HeroesComponent manually to the declarations in configureTestingModule (in app.component.spec.ts) eliminates this error.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Solution 3

I just had the exact same issue. Before trying some of the solutions posted here, you might want to check if the component really doesn't work. For me, the error was shown in my IDE (WebStorm), but it turned out that the code worked perfectly when i ran it in the browser.

After I shut down the terminal (that was running ng serve) and restarted my IDE, the message stopped showing up.

Solution 4

A lot of answers/comments mention components defined in other modules, or that you have to import/declare the component (that you want to use in another component) in its/their containing module.

But in the simple case where you want to use component A from component B when both are defined in the same module, you have to declare both components in the containing module for B to see A, and not only A.

I.e. in my-module.module.ts

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

Solution 5

I had the same problem with Angular CLI: 10.1.5 The code works fine, but the error was shown in the VScode v1.50

Resolved by killing the terminal (ng serve) and restarting VScode.

View more solutions

Comments

[Joshua Michael Calafell]

Your folder structure isn't simple. It's confusing. I would suggest following Angular Style Guide (link not provided b/c they change) and use their folder structure suggestions and then make sure that you are using modules correctly. That's what this means. You are either not exporting or declaring your component in a module ingested by the app at some point.

[Scala Enthusiast]

I had this issue and solved it by including a component where it was not being included but where there was a component that included it. Point being... I read ALL of the below answers and tried lots of things before finding my solution... all good contributions so recommend reading more than one. HTH

[Iman Bahrampour]

If none of the answers worked, Just delete and re-create the 'contacts-box' component.

[Aranha]

Your steps didn't help me but maybe it's because I'm pretty new to Angular 2, so I'll answer them and perhaps we will figure the solution out together. I am sure the name is correct, I declared the component in AppModule, I exported the component in AppModule and restarted the cli. I also tried importing AppModule in my CustomersAddComponent but it resulted in Error: Maximum call stack size exceeded (I guess we don't import AppModule in Angular 2).

[Robin Dijkhof]

You should declare and export your component in a sepperate module, Not in AppModule. Next you should import this new module in everymodule you wnat to use your component.

[Aranha]

Okay, I get it now. The only question is: when I import the newly created module (say WidgetsModule) it would load aaaaaall the components declared inside, right? That's some overhead but maybe I'm misunderstanding something. I could of course create ContactsBoxModule but that's a lot as for one little component. Any hints?

[Robin Dijkhof]

That is right. And it is hard to tell when you should create new module and when you shouldn't. I usually create a new module for every component I reuse. When I have some components that I use almost everywhere I put them in a single module. When I have a component that I don't reuse I won't create a separate module until I need it somewhere else.

[skiabox]

The problem is ide-specific. I have the same problem with webstorm. Webstorm is not informed for changes made with angular-cli so you must restart the IDE to make it 'see' any new components!

[Sebastian Ortmann]

I have the same problem with VS Code but with Ionic 2. In a page it works. In a component there is the error ion-* is not a known element. I've tried your suggestion to stop ionic serve and restarted the IDE, but nothing works. Do you know another solution for this? By the way - the code works anyway.

[Rzassar]

In my case, component selector was different.

[Rohit Sharma]

@RobinDijkhof Why we should not declare the reusable component inside the AppModule whenever its the root module and all the declarations inside it are available to the child modules? Though I am facing the same issue and component is not accessible in child modules, why we should create another module and import it again and again instead of a single declaration of the component in AppModule?

[Robin Dijkhof]

@RohitSharma Yes would be posible. However, you could get some performance issues during development. While developing, a module has to recompile everytime changes are made. The bigger the module (more compontens) the more time it takes. Making a small change to big module takes more time than making a small change in a small module.

[Robin Dijkhof]

You can and must import modules mutiple times. If a module is imported by some someModule it isn't accesible by it's children. You must import it for it's children as well.

[Ben Racicot]

@RobinDijkhof I think the problem a lot of people have is when those "child" components need to use an exported component from the parent's module. What do you do then?

[Robin Dijkhof]

Substract it from the parent and put it in a new module. This is decribed in the first few comments.

[Mohamed Mahmoud]

this also fixed it for webstorm 2018.3

[adam0101]

In my case, I had the component declared in app.module but then created a separate module for it and forgot to delete the declaration in app.module!

[Vahid Najafi]

Restart the cli worked for me. I don't know why this happened.

[SUHAIL KC]

Thanks. In my case, I forgot to export the component.

[Rajesh Pal]

In case of using component from another module, you have to export this component from that module file. ex. exports: @NgModule({ exports: [LazyTwoComponent], , Thanks , its working

[Michael Pearson]

I had to restart VS Code

[quicklikerabbit]

Had the same issue with VSCode. After restarting the editor the message went away.

[Alexander]

I am stuck on my case: I import 3rd party module (which in fact is just a set of exported declared classes) into my component A of module A. Component A is used by my app module (I need to, to be short). And voila - 3rd party module is reported as "module not found" when trying to compile!

[Julian Egner]

forgot npm install after adding components and a module.. should not develop when tired ;)

[MindRoasterMir]

I am using Angular 10 and it did not allow me to name with app- and this was the reason of my error . this helped me "also check the selector defined in the component".

[Neel Rathod]

Don't forget to export the component when Its' declared in Its own module. Reference stackoverflow.com/questions/39477379/…

[Shahaf Shavit]

Thanks!! I am new to angular and was adding the component to the module import instead of declaration

[Chris]

Something missing here, you need to add all your modules to the imports:[] array in app.module.ts - I don't know why generate module does not do this automatically.

[Frazer Kirkman]

thank you. I hope people try this before going down other rabbit holes.

[Anas]

In my case i was forget to add to exports in the other module using this component.

[MikhailRatner]

In my case, it showed me the error on two components (which I correctly imported etc), but the actual problem was that I missed to import the parent component into the model.

[Nalin Ranjan]

Fantastico..!! Your answered just filled my conceptual gap. Thanks a lot.!!!