[Angular 10] Mat Dialog throws error after production deployment

🐞 bug report

Affected Package

I’ve recently upgraded to Angular 10. The issue is caused by package @angular/core.

Is this a regression?

I never faced this issue in previous versions.

Description

I have a dialog component and inside which I’ll be loading other few components (say A, B, C). Now when I remove all component’s selectors & have only text alone in my dialog component, it renders successfully. But if I use the selector of A, B & C’s component, then it is throwing the below error.

During error, only half the dialog width is rendered & contents inside that has not loaded at all. It throws exception in core.js file as below.

ERROR TypeError: Cannot read property 'selectors' of null

I get this error only when using ng build --prod or ng serve --prod. (ie, only when using --prod). Issue didn’t appear in normal ng serve in development mode. Hence there is no way I can reproduce this issue in stackblitz.

Our project is a bit complex and we did not find the exact cause of the issue due to which I could not able to create new repository to reproduce the issue. The error message thrown is not so helpful due to which I am helpless.

🔥 Exception or Error

ERROR TypeError: Cannot read property 'selectors' of null
    at core.js:8052
    at so (core.js:7854)
    at core.js:13632
    at Module.gl (core.js:13668)
    at template (my-dialog.component.html:1)
    at Xi (core.js:7329)
    at Wi (core.js:7138)
    at ko (core.js:8382)
    at core.js:6997
    at Wi (core.js:7163)

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.1
Node: 10.15.0
OS: win32 x64

Angular: 10.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
@angular-devkit/build-angular     0.1000.1
@angular-devkit/build-optimizer   0.1000.1
@angular-devkit/build-webpack     0.1000.1
@angular-devkit/core              10.0.1
@angular-devkit/schematics        10.0.1
@angular/cli                      10.0.1
@angular/material                 10.0.1
@ngtools/webpack                  10.0.1
@schematics/angular               10.0.1
@schematics/update                0.1000.1
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

Anything else relevant? #37323 <- this ticket seems similar to my issue but unfortunately it’s been closed because of lack of information. Please do comment if you need any other information from my side.

[msalmankarim]

I am also facing this same issue.

[kbtganesh]

@atscott

I CLEARLY TOLD, it can’t be reproduced in stackblitz since it’s occurring only when doing build --prod. There is no proper error thrown hence we couldn’t find the root cause. Without knowing the actual problem how can you expect it to be reproduced in new github repo?

I’ve told you the exception error & I am ready to debug each line by line in core.js file as well & tell you at which line in your core.js file is throwing exception. What else you need?

Please do re-open the issue.