4

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

Marc Reitec
  • 69
  • 1
  • 5
  • 2
    Have you imported `CommonModule` into your project? – Ilia Komarov Mar 19 '21 at 13:46
  • Thanks for your response. I've Imported BrowserModule that should include CommonModule? Also no change if I import CommonModule implcit. – Marc Reitec Mar 19 '21 at 15:58
  • 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. – Marc Reitec Mar 19 '21 at 16:00
  • 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! – Marc Reitec Mar 19 '21 at 16:05

3 Answers3

7

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

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 CommunModule

Kyrolus Kamal Fahim Sous
  • 698
  • 1
  • 8
  • 9
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!

Marc Reitec
  • 69
  • 1
  • 5
0

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.

Elias
  • 3,592
  • 2
  • 19
  • 42