Lazy-load angular component — default value for ngComponentOutlet in strict mode

I’m trying to lazy-load a component in Angular 11 (strict mode) following this guide. Strict mode has been a pain because almost no examples/tutorials use it.

This component will load the appropriate header component (eventually). I’m just trying to lazy-load one for "site A" to start.


  selector: 'header-loader',
  template: `<ng-template [ngComponentOutlet]="headerComponent | async"></ng-template>`,
  styles: []
export class HeaderLoaderComponent implements OnInit {

  headerComponent: Promise<Type<SiteAHeaderComponent>>;

  constructor() { }

  ngOnInit(): void {

  private LoadHeaderComponent() {
    if (!this.headerComponent) {
      this.headerComponent = import(`../myFolder/siteA-header/siteA-header.component`)
                       .then(({ SiteAHeaderComponent}) => SiteAHeaderComponent);


With that, I get error: Property 'headerComponent' has no initializer and is not definitely assigned in the constructor..

Ok, I’m used to that error by now with strict mode, so I change it to:

headerComponent: Promise<Type<SiteAHeaderComponent>> | null = null;

so it can start null before ngOnInit gets a chance to set it.

Now on [ngComponentOutlet] I get: Type 'Type<SiteAHeaderComponent> | null' is not assignable to type 'Type<any>'.

How do I give headerComponent a default value?

Source: Angular Questions