Repository navigation
Build Optimizer [es2015] "ReferenceError: Must call super constructor" issue with lazy-loaded modules #14416
Description
This is a Bug Report:
This issue seems to be well-described and well-documented here (and in related posts -- but maybe not fully fixed): #12112
As per request to another individual in that thread, I am making a new issue.
Everything continues to work fine locally and compile and/or build fine and I didn't notice the issue in full builds before, but when I added a lazy-loaded module and then did a build with ng build --prod --aot --configuration=prod, when I loaded the application and then tried to access the lazy-loaded module, I was met with the following error:
ERROR Error: Uncaught (in promise): ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
at new h (main.cc420060cea3d910f83b.js:1)
at Ui (main.cc420060cea3d910f83b.js:1)
at Li (main.cc420060cea3d910f83b.js:1)
at Mi (main.cc420060cea3d910f83b.js:1)
at vs (main.cc420060cea3d910f83b.js:1)
at Os (main.cc420060cea3d910f83b.js:1)
at As (main.cc420060cea3d910f83b.js:1)
at vs (main.cc420060cea3d910f83b.js:1)
at Os (main.cc420060cea3d910f83b.js:1)
at As (main.cc420060cea3d910f83b.js:1)
at D (polyfills.b26e32860129b4873292.js:1)
at D (polyfills.b26e32860129b4873292.js:1)
at polyfills.b26e32860129b4873292.js:1
at t.invokeTask (polyfills.b26e32860129b4873292.js:1)
at Object.onInvokeTask (main.cc420060cea3d910f83b.js:1)
at t.invokeTask (polyfills.b26e32860129b4873292.js:1)
at e.runTask (polyfills.b26e32860129b4873292.js:1)
at d (polyfills.b26e32860129b4873292.js:1)
at e.invokeTask [as invoke] (polyfills.b26e32860129b4873292.js:1)
at b (polyfills.b26e32860129b4873292.js:1)
ye @ main.cc420060cea3d910f83b.js:1
handleError @ main.cc420060cea3d910f83b.js:1
next @ main.cc420060cea3d910f83b.js:1
r @ main.cc420060cea3d910f83b.js:1
__tryOrUnsub @ main.cc420060cea3d910f83b.js:1
next @ main.cc420060cea3d910f83b.js:1
_next @ main.cc420060cea3d910f83b.js:1
next @ main.cc420060cea3d910f83b.js:1
next @ main.cc420060cea3d910f83b.js:1
emit @ main.cc420060cea3d910f83b.js:1
(anonymous) @ main.cc420060cea3d910f83b.js:1
t.invoke @ polyfills.b26e32860129b4873292.js:1
e.run @ polyfills.b26e32860129b4873292.js:1
runOutsideAngular @ main.cc420060cea3d910f83b.js:1
onHandleError @ main.cc420060cea3d910f83b.js:1
t.handleError @ polyfills.b26e32860129b4873292.js:1
e.runGuarded @ polyfills.b26e32860129b4873292.js:1
t @ polyfills.b26e32860129b4873292.js:1
r.microtaskDrainDone @ polyfills.b26e32860129b4873292.js:1
d @ polyfills.b26e32860129b4873292.js:1
e.invokeTask @ polyfills.b26e32860129b4873292.js:1
b @ polyfills.b26e32860129b4873292.js:1
m @ polyfills.b26e32860129b4873292.js:1
My ng version:
Angular CLI: 7.3.9
Node: 10.15.3
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cli 7.3.9
@angular/pwa 0.13.9
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.5.2
typescript 3.2.4
webpack 4.29.0
My tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strictNullChecks": true,
"noImplicitAny": false,
"noImplicitThis": true,
"alwaysStrict": false,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"types": [
"arcgis-js-api"
],
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom",
"esnext.asynciterable"
],
"baseUrl": ".",
"paths": {
"core-js/es6/*": ["./node_modules/core-js/es/*"],
"core-js/es7/reflect": ["./node_modules/core-js/proposals/reflect-metadata"]
}
}
}My angular.json:
...
"prod": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
...
Activity
alan-agius4 commentedon May 14, 2019
This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?
You can read here why this is needed. A good way to make a minimal repro is to create a new app via
ng new repro-appand adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.This might be related to your directory structure so its really important to get an accurate repro to diagnose this.
alan-agius4 commentedon May 14, 2019
Does this error disappear if you disable Build Optimizer?
Ie using:
maplion commentedon May 14, 2019
@alan-agius4 Yes, my current workaround was to set buildOptimizer to
falsein my tsconfig and the error goes away.Yeah, I wasn't sure if I needed to since this issue seems to have lingered for a long time so I'm sure some people are well-aware of it -- this is just slightly deeper manifestation of it. Either way, I'll see if I can find time to set up something up.
shlomiassaf commentedon May 26, 2019
@alan-agius4 @filipesilva
OK, it took me 4 hours but I think I found the root cause, or at least the way to reproduce exactly.
I've created a repository to reproduce it, all explanations are in the readme file there.
https://github.com/shlomiassaf/angular-cli-build-optimizer-es2015-issue
Ohh boy, this one was tricky.
TLDR: It will only happen if the class is built in
FESM2015module AND it has a NON-ANGULAR decorator applied on it.I.E: Angular packages built with
ng-packger.I don't think it's related to lazy loading...
alan-agius4 commentedon May 27, 2019
Hi @shlomiassaf, this seems related to this issue #14084 which should be able to solve the above in version 8.
shlomiassaf commentedon May 27, 2019
@alan-agius4 Is it possible to patch 7 with this change as well? or tsickle was only removed in 8?
Seems like a small change...
filipesilva commentedon May 27, 2019
Thanks for taking the time to reproduce it @shlomiassaf! It looks like it was the same root cause as #14084 so #14263 closes this issue as well. I don't think we'll be backporting it to 7 as backporting is usually reserved for high impact security issues. Instead we recommend updating to 8 to fix this.
maxim1006 commentedon Sep 2, 2019
Why not? In my company we can't update to a8 instantly. And still wanna use Angular and ng library. Please add fic in a7.
angular-automatic-lock-bot commentedon Oct 3, 2019
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.