How to import CommonModule for root in standalone components appoach?

Question

I've recently started new application and found out information that Angular team is going to make standalone approach default and eventually get rid of modules. So I decided to rewrite my app.

However, I cannot use CommonModule in providers array inside of main.ts. Is there any way to import it globally and not in every component (or by routing)?

Here is my code that should work:

// main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(CommonModule)],
});

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
})
export class AppComponent {}

<!-- app.component.html -->

<div *ngIf="true">TEST</div>

And I still get error:

src/app/app.component.html:1:7 - warning NG8103: The `*ngIf` directive was used in the template, but neither the `NgIf` directive nor the `CommonModule` was imported. Please make sure that either the `NgIf` directive or the `CommonModule` is included in the `@Component.imports` array of this component.

1 <div *ngIf="true">TEST</div>
        ~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

I already tried to use imports: [CommonModule] in @Component({}) decorator, but this is not a good solution, because this module will be used probably in every component, so this is just gonna be boilerplate.

Answer 1

The error you have is quite explicit, it's not a provider issue:

Please make sure that either the NgIf directive or the CommonModule is included in the @Component.imports array of this component.

You need to either add CommonModule or NgIf in the imports: [] of your standalone component.

Answer 2

Individually import what you need from CommonModule in app.config.ts and provide globally in providers array using 'provide' and 'useClass' . For e.g., in below code I'm importing AsyncPipe from CommonModule and providing globally. This will allow me to use async pipe anywhere in my stand alone components.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { AsyncPipe } from '@angular/common';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    {
      provide: AsyncPipe,
      useClass: AsyncPipe
    }
  ]
};