2011: The component 'X' appears in 'imports', but is not standalone

# 2011: The component 'X' appears in 'imports', but is not standalone

The Angular error "NG2011: The component 'X' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule" occurs for multiple reasons:

• Your Angular server not picking up your imports or declarations. (Restart your server with Ctrl + C and npm start)
• Adding a component to your imports array instead of to your declarations array by mistake.
• Mistakenly importing a component instead of a module and adding it to your imports array, e.g. importing MatSnackBar instead of MatSnackBarModule.
• Adding a service to your imports array instead of adding it to the providers array.

Depending on your Angular version you might get any of the following variations of the same error:

• Error: src/app/app.module.ts:26:5 - error NG2011: The component 'X' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via a NgModule.

• error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to a NgModule class. Is it missing an @NgModule annotation

• error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

# Try to restart your Angular server

The first thing you should try is to restart your Angular server as it might not be picking up the changes you've made to your imports or declarations arrays in the @NgModule decorator in app.module.ts.

1. Focus your terminal window and press Ctrl + C (or Cmd + C on macOS) to stop your development server.

2. Start your Angular server with the npm start command.

Copied!
npm start

You can also run the npx ng serve command to start your dev server.

Copied!
npx ng serve

# Make sure you haven't added a Component to your imports array

Another common cause of the error is adding a component to your imports array in @NgModule in app.module.ts.

Here is an example.

Copied!
// 👇️ importing component
import { ExampleComponent } from './example/example.component';

@NgModule({
  declarations: [AppComponent],

  imports: [
    BrowserModule,
    AppRoutingModule,

    // ⛔️ Added the component to `imports` by mistake
    ExampleComponent,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

If I start my server, the following error message is shown.

Copied!
Error: src/app/app.module.ts:26:5 - error NG2011: The component 'ExampleComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

To solve the error, make sure to add your components to the declaration array and not to the imports array.

Copied!
// 👇️ importing component
import { ExampleComponent } from './example/example.component';

@NgModule({
  // ✅ Add the component to the declarations array
  declarations: [AppComponent, ExampleComponent],

  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

If you still get the error after making the correction, try to restart your Angular server as it might not be picking up the changes you've made to your @NgModule decorator.

# Importing a component instead of a Module by mistake

The error also occurs when you import a component instead of a module, e.g. MatSnackBar instead of MatSnackBarModule or MatDialog instead of MatDialogModule and add the component to your imports array.

Here is an example.

Copied!
// 👇️ importing a component
import { MatSnackBar } from '@angular/material/snack-bar';

@NgModule({
  declarations: [AppComponent],

  imports: [
    // ⛔️ trying to add the component to your imports array
    MatSnackBar,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

The code sample above causes the following error.

Copied!
Error: src/app/app.module.ts:28:5 - error NG6002: 'MatSnackBar' does not appear to be an NgModule class.

70 export declare class MatSnackBar extends _MatSnackBarBase {
                        ~~~~~~~~~~~
This likely means that the library (@angular/material/snack-bar) which declares MatSnackBar has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

To solve the error, you have to import the module instead of the component and add the module to your imports array.

Copied!
// ✅ import the module
import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  declarations: [AppComponent],

  imports: [
    // ✅ add the module to your imports array
    MatSnackBarModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Notice that we importing MatSnackBarModule instead of MatSnackBar.

Other examples would be MatDialogModule instead of MatDialog, HttpClientModule instead of HttpClient, etc.

# Adding a service to your imports array instead of adding it to providers

Another common cause of the error is adding a service to your imports array instead of adding it to the providers array in @NgModule.

For example, the following code sample causes the error.

Copied!
@NgModule({
  declarations: [AppComponent],
  imports: [
    // ⛔️ Services should be in the `providers` array
    MyService,
  ],
  providers: []
})
export class AppModule { }

To solve the error, move your services to the providers array.

Copied!
@NgModule({
  declarations: [AppComponent],
  imports: [],
  // ✅ Works
  providers: [MyService]
})
export class AppModule { }

# Restart your server and clear the cache

If the error persists, try to restart your server and clear the cache.

1. Focus your terminal window and press Ctrl + C (or Cmd + C on macOS) to stop your development server.

2. Clear the npm cache.

Copied!
npm cache clean --force

3. Start your Angular server with the npm start command.

Copied!
npm start

You can also run the npx ng serve command to start your dev server.

Copied!
npx ng serve

# Delete your node_modules and reinstall your dependencies

If the error persists, try to stop your development server and reinstall your dependencies.

If you are on macOS or Linux, run the following commands in bash or zsh.

Copied!
#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are on Windows, run the following commands in CMD.

Copied!
# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

Now start your development server.

Copied!
npm start

You can also run the npx ng serve command to start your dev server.

Copied!
npx ng serve

# Set importHelpers to true in tsconfig.json

If the error persists, open your tsconfig.json file and make sure the importHelpers property in your compilerOptions object is set to true.

Copied!
{
  "compilerOptions": {
    "importHelpers": true,
  }
}

The setting allows you to import helper functions from tslib once per project instead of having to include them per file.

# Conclusion

To solve the Angular error "NG2011: The component 'X' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule", make sure:

• To restart your development server as it might not be picking up your imports or declarations in NgModule.
• To add components to your declarations array instead of your imports array.
• You haven't imported a component instead of a module and added it to your imports array by mistake.
• To add your services to your providers array and not to your imports array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Cannot find module '@angular/core'
• The Angular Compiler requires TypeScript >=4.8.2 and <4.9.0 but 4.9.3 was found instead
• How to check which version of Angular CLI is installed
• Template parse errors: 'mat-icon' is not a known element
• More than one module matches. Use skip-import option to skip importing the component into the closest module
• Angular Error: Unknown argument: prod when running ng build
• This command is not available when running the Angular CLI outside a workspace
• How to entirely delete a Component in Angular
• Angular: mat-form-field must contain a MatFormFieldControl
• Generate component in specific folder with the Angular CLI