Uncaught TypeError: Cannot read property 'ɵcmp' of undefined

[Marka83]

🐞 bug report

Is this a regression?

I don't know. I've tried with 9.0.7 and 9.1.0, but it works the same. I haven't tested earlier versions.

Description

We migrated application from 8.2.3 to 9.1.
ng build and ng serve works as expected and application works with no errors.
When we build with ng build --prod everything goes fine - no errors.
But in production it throws this exception on loading of application:

Uncaught TypeError: Cannot read property 'ɵcmp' of undefined
at Object.yA (vendor.a5630b07ff8c3731c011.js:1)
at Object.mTkS (main.b71bfbef186c603a7db8.js:1)
at a (runtime.081b9fa9cdbc29e694e9.js:1)
at Object.vkcX (main.b71bfbef186c603a7db8.js:1)
at a (runtime.081b9fa9cdbc29e694e9.js:1)
at Object.j0Xk (main.b71bfbef186c603a7db8.js:1)
at a (runtime.081b9fa9cdbc29e694e9.js:1)
at Object.vtpD (main.b71bfbef186c603a7db8.js:1)
at a (runtime.081b9fa9cdbc29e694e9.js:1)
at Object.vY5A (main.b71bfbef186c603a7db8.js:1)

In vendor chunk. I explicitly set "vendorChunk": true, but even with false error is only reported in main.

🔬 Minimal Reproduction

I can't share code. I could only try to create some new project, but I would have to use every external library to try to find what is causing error.

🔥 Exception or Error

Uncaught TypeError: Cannot read property 'ɵcmp' of undefined
    at Object.yA (vendor.a5630b07ff8c3731c011.js:1)
    at Object.mTkS (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vkcX (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.j0Xk (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vtpD (main.b71bfbef186c603a7db8.js:1)
    at a (runtime.081b9fa9cdbc29e694e9.js:1)
    at Object.vY5A (main.b71bfbef186c603a7db8.js:1)

🌍 Your Environment

Angular Version:

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.0.1
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[Marka83]

{
"name": "xxx",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"stats": "webpack-bundle-analyzer dist/xxx/stats.json",
"build": "ng build",
"test": "ng test",
"sme": "source-map-explorer",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "9.0.7",
"@angular/cdk": "9.0.1",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/platform-server": "9.0.7",
"@angular/router": "9.0.7",
"@ng-bootstrap/ng-bootstrap": "6.0.0",
"@ng-select/ng-select": "3.7.3",
"@ngx-translate/core": "12.1.2",
"@ngx-translate/http-loader": "4.0.0",
"ajv": "6.12.0",
"bootstrap": "4.4.1",
"chart.js": "2.9.3",
"class-transformer": "0.2.0",
"core-js": "3.6.4",
"file-saver": "2.0.2",
"json-ignore": "0.4.0",
"ng2-charts": "2.3.0",
"ngx-color-picker": "9.0.0",
"ngx-toastr": "12.0.0",
"pdfmake": "0.1.65",
"print-js": "1.0.63",
"reflect-metadata": "0.1.13",
"rxjs": "6.5.4",
"tslib": "1.11.1",
"xlsx": "0.15.6",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "9.0.0",
"@angular-devkit/build-angular": "0.900.7",
"@angular/cli": "9.0.7",
"@angular/compiler-cli": "9.0.7",
"@angular/language-service": "9.0.7",
"@biesbjerg/ngx-translate-extract": "6.0.3",
"@types/jasmine": "3.5.9",
"@types/jasminewd2": "2.0.8",
"@types/node": "13.9.2",
"codelyzer": "5.2.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "3.1.1",
"karma-jasmine-html-reporter": "1.5.2",
"rxjs-tslint": "0.1.7",
"source-map-explorer": "2.4.0",
"ts-node": "8.7.0",
"tslint": "5.20.1",
"typescript": "3.7.5"
}
}

[Marka83]

It has to do something with AOT.
When I disable
"optimization": false,
"aot": false,
"buildOptimizer": false,

Everything works as expected
If i set aot:true, it doesn't work anymore.

[flash-me]

Hi @Marka83

I encountered this error when I tried to load non AOT bundles without @angular/compiler being in the application.
Are you trying to dynamically load components in your app?

When compiling with AOT, the runtime compiler is not available

cheers
flash ⚡

[alxhub]

Hi @Marka83,

Sorry to hear you're having this issue! It sounds like one of the classes referenced as a component in your application is not actually a component at runtime.

Unfortunately, without more information on your setup (ideally a reproduction that allows us to debug the problem), we don't really have a good way of investigating this.