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

Answer 1

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!

Answer 2

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

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>

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.