I generated two components, HomeMainComponent and QuestComponent. I also generated their modules, HomeMainModule and QuestModule.
Folder Structure looks like this:
- src
-- app
--- components
----- home
------ home-main
------ quest
I’m adding components in their respective modules’ export array:
In home-main.module.ts:
exports: [HomeMainComponent],
In quest.module.ts:
exports: [QuestComponent],
I’m sure I explicitly imported the components with the correct paths.
Now, I import the QuestModule into the home-main.module.ts file to add it to the module imports array.
in home-main.module.ts file:
imports: [CommonModule, QuestModule],
With this, I make available the app-quest selector in the home-main.component.html file.
<p>home-main works!</p>
<app-quest></app-quest>
However, I get an error Failed to compile. Error: src/app/components/home/home-main/home-main.component.html:2:1 – error NG8001: ‘app-quest’ is not a known element.
I had been using this pattern without problems before.
If it helps to know, the first time I generated those components I tried to manually rename folder and files for the QuestComponent, got this error and I decided to delete both components and regenerate them. VSC doesn’t show any errors, but I get it when running ng serve
.
I tried regenerating the component and module files.
I checked all of the paths of the imports and selectors names.
I’ve made sure that my components are declared in their respective modules and exported.
I stopped development server and started it again (ng serve).
I deleted .angular and node_modules folders, ran npm i and ng serve.
I didn’t install any package when this error ocurred. The only thing I did differently was trying to manually rename folder and files for a generated module and component. However, I deleted them and regenerated them from scratch.
Glowbo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.