[ERROR] NG8001: 'xxx' is not a known element

This is a very common error when you are working with Angular, today, I will give a special case of this error.

I have the following code in my app.

1. ProductHomeModule -> ProductHomeComponent
2. ProductDetailModule -> ProductDetailComponent
3. App router contains the following routes:

   // app-routing.module.ts
   const routes: Routes = [
      { path: 'product', component: ProductHomeComponent },
   ]

   When I build my app, I got the following error:

ERROR in src/app/product-home/product-home.component.html:1:1 - error NG8001: 'app-product-detail' is not a known element:

But If I remove the router for product, the error is gone, why?
Because, I use ProductHomeComponent in app-routing.module.ts which in turn was used in file app.module.ts, But, when Angular compile template for ProductHomeComponent, it didn’t know where to find ProductDetailComponent. to solve this, import ProductHomeModule in app.module.ts like this:

imports: [
   ProductHomeModule
]

Then the error is gone. Because, ProductHomeModule has imports ProductDetailModule, so Angular knows where to find ProductDetailComponent.

Conclusion:
If you wan to use a component from another module, you need to import the module which contains the component in the module where you use the component. You may use the component by selector in templates or in the router, both need to import the module which contains the component.