Angular-cli: Build Optimizer [es2015] "ReferenceError: Must call super constructor" issue with lazy-loaded modules

[maplion]

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): https://github.com/angular/angular-cli/issues/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
                        }
...

[alan-agius4]

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-app and 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]

Does this error disappear if you disable Build Optimizer?

Ie using:

ng build --prod --no-build-optimizer

[maplion]

@alan-agius4 Yes, my current workaround was to set buildOptimizer to false in 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]

@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 FESM2015 module 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]

Hi @shlomiassaf, this seems related to this issue https://github.com/angular/angular-cli/issues/14084 which should be able to solve the above in version 8.

[shlomiassaf]

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

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]

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.

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[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._}