angular - Modul strict - incompatibilitate de tip la setarea valorii pentru ngComponentOutlet cu componentă încărcată lazy

Încerc să încarc un componentă pe cerere în Angular 11 (mod strict) urmând acest ghid. Modul strict a fost o provocare pentru că aproape niciun exemplu/tutorial nu îl folosește.

Acest component va încărca componenta de antet corespunzătoare (în cele din urmă). Încerc doar să încarc pe modul lazy unul pentru „site-ul A” pentru început.

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);
    }
  }
}

Cu asta, primesc eroare:

Proprietatea 'headerComponent' nu are un initializer și nu este alocată cu certitudine în constructor.

Ok, m-am obișnuit cu acea eroare până acum cu modul strict, așa că o schimb în:

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

astfel încât să poată începe ca null înainte ca ngOnInit să aibă șansa să îl seteze.

Acum, pe [ngComponentOutlet] primesc:

Tipul 'Type | null' nu poate fi atribuit tipului 'Type'

Cum pot seta o valoare pentru headerComponent?

Editare:
Doar ca să fiu sigur, am încercat asta cu Strict dezactivat temporar și funcționează grozav.

Răspuns #1

Folosește simbolul ! cu proprietatea atunci când o atribui, ca în headerComponent!.

Simbolul ! cu numele proprietății înseamnă că declarați în mod explicit - „Știu că această proprietate are o valoare nenulă”. Și în cazul tău, dacă are o valoare nenulă, atunci valoarea pe care o are este cu siguranță de tipul Type.

EDITARE :
Deoarece proprietatea headerComponent este de tip Promise, trebuie să folosești simbolul ! în jurul pipe-ului async în template, ca în (headerComponent|async)!.

De asemenea, aș recomanda să folosești -

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

Altfel, nu vei putea seta mai târziu un tip diferit de componentă header prin proprietatea headerComponent.