Rendering the Angular AppComponent as Standalone?

March 5, 2023

Trying to "Switch" the Angular AppComponent to render as standalone after generating a new project using the CLI. This attempt compiles fine, but the template does not render.

Here are the steps:

ng new project
cd project

Then change the AppComponent to look like this:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  standalone: true,
  imports: [RouterModule, CommonModule],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'b';
}
bootstrapApplication(AppComponent);

Also remove AppComponent from app.module.ts since it’s now standalone.

Finally comment out this line in main.ts since we are bootstrapping the component.

/*
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
*/

If I now run ng serve -o the application compiles and boots, but the app.component.html template does not render. Thoughts?

>Solution :

Assuming the version of angular that you are using supports standalone components.

You’ll have to move bootstrapApplication(AppComponent); from AppComponent to main.ts, because it searches for this function in the entry point (main property) defined in the angluar.json.