angular: [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.

image

🔥 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.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 15 (7 by maintainers)

Most upvoted comments

I am also facing this same issue.

@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.

@kbtganesh Those ɵɵupdateSyntheticHostBinding errors smell like an issue with multiple versions of @angular/core. This can either be because of symlinks into a different tree where there’s a node_modules folder in scope, which will result in that @angular/core package installed in that node_modules folder to be resolved for the symlinked library. Alternatively, it may be that you have multiple versions installed because of incompatible dependencies requirements (which should typically be peerDependencies, but not all libraries do this correctly).

@petebacondarwin,

It just introduced new errors 😦

I’ve tried updating angular material to latest version, clear npm cache, update ‘npm’ to latest version, remove nodemodule+package lock & did npm install again. Nothing worked.

ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 94:20-44
"export '_CoalescedStyleScheduler' was not found in '@angular/cdk/table'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 61:12-36
"export '_CoalescedStyleScheduler' was not found in '@angular/cdk/table'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 91:66-94
"export '_DisposeViewRepeaterStrategy' was not found in '@angular/cdk/collections'ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 58:58-86
"export '_DisposeViewRepeaterStrategy' was not found in '@angular/cdk/collections'ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 58:23-46
"export '_VIEW_REPEATER_STRATEGY' was not found in '@angular/cdk/collections'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 91:31-54
"export '_VIEW_REPEATER_STRATEGY' was not found in '@angular/cdk/collections'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/sidenav.js 433:8-47
"export 'ɵɵcomponentHostSyntheticListener' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/snack-bar.js 392:8-47
"export 'ɵɵcomponentHostSyntheticListener' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/bottom-sheet.js 249:8-47
"export 'ɵɵcomponentHostSyntheticListener' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/datepicker.js 2392:8-47
"export 'ɵɵcomponentHostSyntheticListener' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/dialog.js 328:8-47"export 'ɵɵcomponentHostSyntheticListener' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/dialog.js 332:8-43"export 'ɵɵupdateSyntheticHostBinding' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/sidenav.js 436:8-43
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/datepicker.js 2394:8-43
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/snack-bar.js 395:8-43
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'ɵngcc0') was not found in '@angular/core'
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/bottom-sheet.js 252:8-43
"export 'ɵɵupdateSyntheticHostBinding' (imported as 'ɵngcc0') was not found in '@angular/core'

I’ve seen the similar issue here https://github.com/angular/angular/issues/29564#issuecomment-508063442 and you said to follow other issue #31394 for instructions to proceed but it didn’t have any instruction at all to get rid of this issue.

Reopening and handing off to ngcc team for further triage. They have been investigating issues similar to this lately. Potentially related to #37878 #38453 @petebacondarwin

Thanks for reporting this issue. However, you didn’t provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can’t act on issues that are lacking important information.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template, including a minimal reproduction in StackBlitz or a GitHub repo.