Strict mode – type incompatibility when setting value to ngComponentOutlet with lazy-loaded component

Posted on by

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.

header-loader-component.ts

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

  headerComponent: Promise<Type<SiteAHeaderComponent>>;

  constructor() { }

  ngOnInit(): void {
    this.LoadHeaderComponent();
  }

  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 | null’ is not assignable to type
‘Type’

How do I set a value for headerComponent?

Edit:
Just to be sure, I just tried this with Strict temporarily disabled and it works great.

Source: Angular Questions