angular standalone component not woking in child or shared componnent

Issue

I am working on an angular application with core, shared and feature modules. I have the opportunity to update bit by bit the application with new standalone components. But it does not work everywhere.

Here is an stackblitz demo : https://stackblitz.com/edit/stackblitz-starters-2repu6?file=src%2Fmain.ts (sorry but I do not know how to boostrap it on stackblitz)

I succeeded to make work standalone component in some cases except in a shared component or in a child component of a feature module. The error I get is : [ERROR] NG8001: 'app-standalone' is not a known element

I do not understand what is wrong. Even after reading about standalone components. Maybe it is simple. But I have not understood what I missed.

JP

Solution

1. Standalone component : works

No problem, because you are lazy loading StandaloneComponent (standalone: true) and since it has StandaloneChildComponent (standalone: true) in its imports, its loading without any issues!

---

2. Feature component : works

No problem, you are having StandaloneComponent (standalone: true) in the imports array of FeatureModule, which means, we can use it in the html of featureComponent as <app-standalone />

---

3. Feature child component : does not work!

Problem, because FeatureChildComponent (standalone: false) has not been added to the declarations array of FeatureModule, that is why you are getting the error for 'app-standalone' is not a known element.Since the StandaloneComponent lies in the imports of FeatureModule, we need to have FeatureChildComponent declaration in the FeatureModule for app-standalone to be usable!

---

4. Shared component in Feature : does not work !

Problem, because SharedComponent (standalone: false) has not been added to the declarations array of SharedModule, that is why you are getting the error for 'app-standalone' is not a known element. Since the StandaloneComponent lies in the imports of SharedModule, we need to have the SharedComponent declaration in the SharedModule for app-standalone to be usable!

---

Note: When you have a standalone component, that needs to be used in scenarios other than routing, add it to the imports array of a module/standalone component!

stackblitz

Answered By - Naren Murali