Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'

Question

It seem to be a problem of the '@angular/common' module and the ivy compiler? Any ideas? Deleting node_modules and updating angular does not have any success.

        <!-- Define our template -->
        <ng-template #myTemplate> World! </ng-template>

        Hello
        <!-- Render the template in this outlet -->
        <ng-container [ngTemplateOutlet]="myTemplate"></ng-container>

If I try ...*ngTemplateOutlet=... then I get this Error at runtime: NG0303: Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'. node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:10073

Angular Version 11

Vc

Have you imported CommonModule into your project? – Sannyasi

Thanks for your response. I've Imported BrowserModule that should include CommonModule? Also no change if I import CommonModule implcit. – Vc

If I try to import NgTemplateOutlet I get the Error: node_modules/@angular/common/common.d.ts:2116:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. This likely means that the library (@angular/common) which declares NgTemplateOutlet has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy. – Vc

If I do a blank app (ng new app-name) it works. But if I use DevExtreme template ( "npx -p devextreme-cli devextreme new angular-app app-name" ) I can reproduce the error. I also asked in DevExpress support. So may be this is a problem of their libs. I'll keep you up to date! – Vc

Answer 1

The problem is that you need to import it from CommonModule.

However, now in Angular 15+, you can import NgTemplateOutlet only becasue in Angular 15 you can import what you realy need in your component instead of importing all the directives in the CommonModule

Biblical

Answer 2

It was a confusion of app.module.ts (that in fact imported BrowserModule) and app-routing.module.ts in the DevExtreme Template. After I add BrowserModule in app-routing.module.ts to @NgModule({ imports: it works as expected. @Ilia Komarov: Thanks! You have been also right with your solution!

Vc

Answer 3

Another pitfall leading to this error is, that you can't use the property binding syntax [ngTemplateOutletContext] when you are using the *ngTemplateOutlet directive. So you have to stick with the property binding [ngTemplateOutlet] for the template as well.

 <ng-container [ngTemplateOutlet]="myButtonTemplate" [ngTemplateOutletContext]="{ textResourceKey: 'Click_Me' }"></ng-container>

Dread

Answer 4

This may also happen when some sort of mock component, or similar, is not passed to the test bed while testing.

If you have something similar to this in your test:

@Component({
  template: `
    <ng-container *ngTemplateOutlet="test"></ng-container>
    <ng-template #test>Test</ng-template>
  `,
})
class MockComponent {}

You will need to pass that to the TestBed like so:

await TestBed.configureTestingModule({
  declarations: [MockComponent],
}).compileComponents();

According to my testing, not doing that, will result in only the core features of angular working, and the ngTemplateOutlet directive is in the CommonModule.

Adeno

Answer 5

Please import PortalModule in the below section, or you can import in your module if defined.

@Component({ selector: ...., standalone: true/false, imports: [ PortalModule], templateUrl: '.....', })

Riannon