Angular 2 ‘component’ is not a known element

by

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.

More Related Contents:

  1. How can I select an element in a component template?
  2. Use component from another module
  3. Call child component method from parent class – Angular
  4. How to declare a pipe globally to use in different modules?
  5. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  6. How can I get new selection in “select” in Angular 2?
  7. No provider for HttpClient
  8. Argument of type ‘string | null’ is not assignable to parameter of type ‘string’. Type ‘null’ is not assignable to type ‘string’
  9. How do I detect user navigating back in Angular2?
  10. Access environment variables in production build Angular 4
  11. Cannot read property of ‘xxx’ of undefined
  12. Detect changes in objects inside array in Angular2
  13. Lazy Loading BrowserModule has already been loaded
  14. Angular 2 input parameters on root directive [duplicate]
  15. Unit testing click event in Angular
  16. want to show more data in another component when view in detail button is clicked (angular 6)
  17. Tracking scroll position and notifying other components about it
  18. Avoiding relative paths in Angular CLI
  19. ERROR in TypeError: Cannot read property ‘flags’ of undefined
  20. Angular 4: How to read data from Excel?
  21. Sanitize input in Angular2 [duplicate]
  22. What is the difference between declarations, providers, and import in NgModule?
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment