class is a standalone component, which can not be used in the `@NgModule.bootstrap` array in Angular

Question

i got this error when i tried adding bootstrap to my angular project :

The MainComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead

exactly in app.module file

bootstrap:[MainComponent] }) export class AppModule { }

How to fix this error in order to use bootstrap in my application, thanks in advance

Answer 1

it seems that you are mixing both stangalone and ngModule. if you wish to use standalone (without ngModule) u need to use bootstrapApplication(MainComponent) in your main.ts

your second option is to use ngModule and remove the standalone: true property in your MainComponent

    @Component({
      selector: 'app-main',
     
// standalone: true, // remove this !!!!

      templateUrl: './main.component.html',
      styleUrls: ['./main.component.css']
    })
    export class MainComponent {
      // ...
    } 

Answer 2

Please change the main component to

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppModule } from './app.module.ts';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppModule],
  template: `
    Test
  `,
})
export class MainComponent {
  ...
}

bootstrapApplication(App);

In the app module we need to remove MainComponent from the imports array and also remove the bootstrap array.

Since the latest Angular uses standalone modules there is no need to bootstrap using ngmodule anymore, instead go for this method!