Bug Report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Yes, the previous version in which this bug was not present was: v11

Description

We have this lazy components that loads using *ngComponentOutlet directive in v11 but after upgrade to v12, the same code didn’t worked as it displays errors like Can't bind to 'ngIf' since it isn't a known property or The pipe 'async' could not be found! etc., I think this is because of the common module isn’t get referenced.

Minimal Reproduction

I have created this stackblitz repo so just open the console and you’ll see the issues.

If you downgrade it into v11, the same code works.

// alzy-two component

@Component({
  selector: 'app-lazy-2',
  template: `
    <h4>loading lazy level 2</h4>
  `
})
export class LazyTwoComponent {}

// lazy-two module
import { LazyTwoComponent } from './lazy-two.component';

@NgModule({
  imports: [CommonModule],
  declarations: [LazyTwoComponent]
})
export class LazyTwoModule {}

// lazy one

import { LazyTwoComponent } from '../lazy2/lazy-two.component';

@Component({
  selector: 'app-lazy-1',
  template: `
    <h1 *ngIf="title">{{title}}</h1>
    <ng-template [ngIf]="lazyComp | async">
     <ng-container *ngComponentOutlet="lazyComp | async"></ng-container>
    </ng-template>
  `
})
export class LazyOneComponent implements AfterViewInit {
  title = 'hello from one'
  lazyComp: Promise<Type<LazyTwoComponent>>
  ngAfterViewInit(){
    this.lazyComp = import('../lazy2/lazy-two.component')
    .then(({LazyTwoComponent})=> LazyTwoComponent)
  }
}

// lazy-one.module

import { LazyOneComponent } from './lazy-one.component';

@NgModule({
  imports: [CommonModule],
  declarations: [LazyOneComponent]
})
export class LazOneModule {}

// app.ts

import { LazyOneComponent } from './components/lazy1/lazy-one.component';

@Component({
  selector: 'my-app',
  template`<ng-container *ngComponentOutlet="lazyComp | async"></ng-container>`
})
export class AppComponent implements AfterViewInit  {

  lazyComp: Promise<Type<LazyOneComponent>>

  ngAfterViewInit(){
    this.lazyComp = import('./components/lazy1/lazy-one.component').then(({LazyOneComponent}) => LazyOneComponent)
  }
}

// app.module

import { AppComponent } from './app.component';

@NgModule({
  imports:      [CommonModule, BrowserModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Exception or Error

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'h1'.
NG0302: The pipe 'async' could not be found!.

Your Environment

Angular Version:

@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.4