Rendering the Angular AppComponent as Standalone?

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';

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

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.

  .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.

Leave a Reply