Closed
Description
Which @angular/* package(s) are the source of the bug?
Don't known
Is this a regression?
Yes
Description
After upgrading from Angular 19.0.x to 19.1.x, I am encountering an error related to ngTemplateOutlet within ng-container elements in my non-standalone components when HMR (Hot Module Replacement) is enabled. Disabling HMR resolves the issue, and converting the affected components to standalone components also resolves it. This suggests a potential regression in HMR handling for ngTemplateOutlet in non-standalone components.
I'm using NX Monorepo with angular for my project.
This is my html file:
@if (routerLink()) {
<a
#itemContainer
[target]="target()"
[routerLink]="routerLink()"
class="rail-navigation-item"
(click)="handleClickEvent($event)"
[class.state-disabled]="disabled()"
[routerLinkActive]="routerLinkActive()"
[routerLinkActiveOptions]="routerLinkActiveOptions()"
>
<ng-container [ngTemplateOutlet]="railNavigationItemContent"></ng-container>
</a>
} @else if (href()) {
<a
#itemContainer
[href]="href()"
[target]="target()"
class="rail-navigation-item"
(click)="handleClickEvent($event)"
[class.state-active]="active() && !disabled()"
[class.state-disabled]="disabled()"
>
<ng-container [ngTemplateOutlet]="railNavigationItemContent"></ng-container>
</a>
} @else {
<div
#itemContainer
class="rail-navigation-item"
(click)="handleClickEvent($event)"
[class.state-active]="active() && !disabled()"
[class.state-disabled]="disabled()"
>
<ng-container [ngTemplateOutlet]="railNavigationItemContent"></ng-container>
</div>
}
<ng-template #railNavigationItemContent>
<ng-content select="app-prefix"></ng-content>
<ng-content select="app-icon"></ng-content>
<ng-content select="app-text"></ng-content>
<ng-content select="ng-container,ng-content"></ng-content>
<ng-content select="app-suffix"></ng-content>
</ng-template>Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
NG0303: Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container' (used in the '_RailNavigationItemComponent' component template).
1. If 'ng-container' is an Angular component and it has the 'ngTemplateOutlet' input, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.8
Node: 22.11.0
Package Manager: npm 11.1.0
OS: win32 x64
Angular: 19.1.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.8
@angular-devkit/build-angular 19.1.8
@angular-devkit/core 19.1.8
@angular-devkit/schematics 19.1.8
@angular/cdk 19.1.5
@angular/cli 19.1.8
@angular/pwa 19.1.8
@angular/ssr 19.1.8
@schematics/angular 19.1.8
ng-packagr 19.1.2
rxjs 7.8.2
typescript 5.6.3
zone.js 0.15.0
Anything else?
I also get the same problem with ngFor:
NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ng-container' (used in the '_SideMenuComponent' component template).
1. If 'ng-container' is an Angular component and it has the 'ngForOf' input, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.