unintended duplicate imports can cause rendering error in standalone component life cycle.

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;
    }

[JoostK]

@t-bowersox Thanks for the info, that does indeed reveal a JIT-only bug! I have a fix in #46439.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}