I'm trying to figure out why I keep getting this error message when running ng serve. I'm new to Angular so I'm not sure where the problem is happening, but I will lay out what I did so maybe that helps to find a solution.

1. `ng new project-name
2. `ng generate component component-name
3. Insert component selector into root component html file
4. ng serve
5. Error NG8001

The only answer I keep finding is that the new component has to be imported into the root component's imports, but when I generated the component in the CLI it is automatically imported and added to the imports. I got the error to go away by deleting and re-entering the import statement and imports array, but I'm curious as to why this error is happening when the CLI ng g c component-name is already doing that to begin with.

I'm using Angular 17 and standalone components

I'm trying to figure out why I keep getting this error message when running ng serve. I'm new to Angular so I'm not sure where the problem is happening, but I will lay out what I did so maybe that helps to find a solution.

1. `ng new project-name
2. `ng generate component component-name
3. Insert component selector into root component html file
4. ng serve
5. Error NG8001

The only answer I keep finding is that the new component has to be imported into the root component's imports, but when I generated the component in the CLI it is automatically imported and added to the imports. I got the error to go away by deleting and re-entering the import statement and imports array, but I'm curious as to why this error is happening when the CLI ng g c component-name is already doing that to begin with.

I'm using Angular 17 and standalone components

• angular
• compiler-errors

• Are you inserting your component in the index.html file or appponent.html ? – RomainG Commented Mar 17 at 9:26

2 Answers 2

You have to import the component to use the component in another component.

@Component({
  selector: 'app-parent',
  imports: [ComponentNameComponent], // <- add the generated component import here in order to use it in the HTML of parent!
  ...
})
export class ParentComponent {
  ...

I faced the same issue when I first worked with standalone components in Angular. Suppose the component you have generated is named ChildComponent. In the root component TS file, you have to import the ChildComponent and also include it in the imports array.

It should look like this :

import { Component } from '@angular/core';
import { ChildComponent } from './child/childponent';// import statement

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],  //imports array
  templateUrl: './appponent.html',
  styleUrl: './appponent.scss'
})