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 {
      // ...
    }