unintended duplicate imports can cause rendering error in standalone component life cycle. #46109
Description
Which @angular/* package(s) are the source of the bug?
compiler-cli, compiler, core
Is this a regression?
No
Description
@Component({
template: `
<mat-form-field>
<input matInput [matDatepicker]="picker">
<mat-datepicker #picker [startAt]="startAt"></mat-datepicker>
</mat-form-field>
`,
standalone: true,
imports: [
MatFormFieldModule, // It caused mat-form-field initializing error.
MatInputModule,
MatDatepickerModule,
],
})
export class StandaloneComponent {
@ViewChild(MatDatepicker, { static: true }) picker: MatDatepicker<any>;
startAt = new Date();
}
Developer expect that cause i use mat-form-field matInput directive so put MatFormFieldModule, MatInputModule in standalone component imports. But, it can cause an error for now. When i remove MatFormFieldModule in StandaloneComponent.imports, it doesn't occur errors. The reason is that MatInputModule already import-export MatFormFieldModule. It seems angular life-cycle handler trigger without duplicate check. Developers cannot consider all module+component dependencies when they use 3rd party library (it can be changed in the future).
It is not only NgModule-only problem in standalone component. I found it can be caused by duplicate imports of Component / NgModule both case.
Duplicate component imports can cause error too.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
instrument.js:109 ERROR TypeError: Cannot set properties of undefined (setting 'ngIf')
at setInputsForProperty (core.mjs:13015:13)
at elementPropertyInternal (core.mjs:12026:9)
at Module.ɵɵproperty (core.mjs:14906:9)
at MatFormField_Template (form-field.mjs:683:3057)
at executeTemplate (core.mjs:11621:9)
at refreshView (core.mjs:11484:13)
at detectChangesInternal (core.mjs:12873:9)
at ViewRef$1.detectChanges (core.mjs:21935:9)
at MatFormField.ngAfterViewInit (form-field.mjs:460:33)
at callHook (core.mjs:2576:22)
at callHooks (core.mjs:2545:17)
at executeInitAndCheckHooks (core.mjs:2496:9)
at refreshView (core.mjs:11555:21)
at refreshComponent (core.mjs:12688:13)
at refreshChildComponents (core.mjs:11274:9)
at refreshView (core.mjs:11534:13)
at renderComponentOrTemplate (core.mjs:11601:9)
at tickRootContext (core.mjs:12864:13)
at detectChangesInRootView (core.mjs:12890:5)
at RootViewRef.detectChanges (core.mjs:21974:9)
at ComponentLoader.show (ngx-bootstrap-component-loader.mjs:125:65)
at BsModalService._showModal (mapiacompany-ngx-bootstrap-modal.mjs:500:1)
at BsModalService.show (mapiacompany-ngx-bootstrap-modal.mjs:378:1)
at TagEditModalComponent.openTagFeaturedModal (tag-edit-modal.component.ts:537:35)
at TagEditModalComponent_div_2_mp_button_3_Template_mp_button_click_0_listener (template.html:34:9)
at executeListenerWithErrorHandling (core.mjs:15474:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15509:22)
at HTMLElement.<anonymous> (platform-browser.mjs:459:38)
at HTMLElement.sentryWrapped (helpers.js:74:23)
at _ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.mjs:26304:33)
at _ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
at invokeTask (zone.js:1648:1)
at globalCallback (zone.js:1691:1)
at HTMLElement.globalZoneAwareCallback (zone.js:1712:1)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.0.0-rc.1
Node: 16.14.2
Package Manager: npm 8.5.0
OS: darwin x64
Angular: 14.0.0-rc.1
... animations, bazel, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1400.0-rc.1
@angular-devkit/build-angular 14.0.0-rc.1
@angular-devkit/core 14.0.0-rc.1
@angular-devkit/schematics 14.0.0-rc.1
@angular/cdk 14.0.0-rc.0
@angular/material 14.0.0-rc.0
@angular/youtube-player 13.3.1
@nguniversal/common 13.1.1
@schematics/angular 14.0.0-rc.1
ng-packagr 14.0.0-rc.0
rxjs 7.5.5
typescript 4.6.4
Anything else?
We use ngx-bootstrap modal to open these standalone component.
show(opts = {}) {
...
if (!this._componentRef) {
this._componentRef = this._componentFactory.create(injector, this._contentRef.nodes);
this._applicationRef.attachView(this._componentRef.hostView);
...
if (this._contentRef.componentRef) {
this._innerComponent = this._contentRef.componentRef.instance;
this._contentRef.componentRef.changeDetectorRef.markForCheck();
this._contentRef.componentRef.changeDetectorRef.detectChanges(); // Here is error state.
}
this._componentRef.changeDetectorRef.markForCheck();
this._componentRef.changeDetectorRef.detectChanges();
}
...
return this._componentRef;
}