App that has lazy loading modules is not rendering any pages in prod mode after update to angular 8.

🐞 Bug report

Command

- [ ] new
- [ x ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Probably, this bug has never occurred before updating to angular 8 and "@angular-devkit/build-angular": "^0.800.0"

The previous version in which this bug was not present was: "@angular-devkit/build-angular": "^0.13.9"

Description

App is not rendering any pages in prod mode when it’s built with aot and buildOptimizer enabled. It just fetches all scripts that are needed and fetching data from server, but not rendering the page after that. 1. With buildOptimizer set to false this problem doesn’t occur. 2. If app doesn’t have lazy loaded modules, even with buildOptimizer set to true everything works as expected.

When project is built with aot and buildOptimizer set to true, after I open the website it navigates me to lazy loaded module url like websitename.com/lazy-loaded and after that it just stays still.

🔬 Minimal Reproduction

Create an application with lazy loaded modules. And build this app in prod mode with aot set to true and buildOptimizer set to true. If I set buildOptimizer to false, everything works fine, but that’s not a solution because I need buildOptimizer to be set to true. If buildOptimizer is set to true, then app is loading files and stops loading further, it navigates to needed route, but not rendering the component.

IMPORTANT

If app doesn’t have any lazy loaded modules (very simple app), then it works fine even when buildOptimizer set to true.

🔥 Exception or Error

No errors.

🌍 Your Environment

Angular CLI: 8.0.1
Node: 10.7.0
OS: win32 x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.1
@angular-devkit/build-angular      0.800.1
@angular-devkit/build-ng-packagr   0.800.1
@angular-devkit/build-optimizer    0.800.1
@angular-devkit/build-webpack      0.800.1
@angular-devkit/core               8.0.1
@angular-devkit/schematics         8.0.1
@angular/cli                       8.0.1
@angular/flex-layout               8.0.0-beta.26
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.1
@schematics/angular                8.0.1
@schematics/update                 0.800.1
ng-packagr                         5.2.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0

[alan-agius4]

Hi all, I want to point every one to this issue, as I have seen post in NGRX and ng-packagr reported for the same issue.

The issue is within Build Optimizer and how we are currently wrapping outputted ES2015 Classes like the below;

class CustomComponentEffects {
    constructor(_actions) {
      this._actions = _actions;
      this.doThis = this._actions;
    }
}
CustomComponentEffects.decorators = [{ type: Injectable }];
CustomComponentEffects.ctorParameters = () => [{ type: Actions }];
tslib_1.__decorate([
    Effect(),
    tslib_1.__metadata("design:type", Object)
], CustomComponentEffects.prototype, "doThis", void 0);
tslib_1.__decorate([
    Effect({ dispatch: false }),
    tslib_1.__metadata("design:type", Object)
], CustomComponentEffects.prototype, "doThat", void 0);

There is already a PR for improving the ES2015 class wrapping. Which by coincidence happen to solve this issue as well. https://github.com/angular/angular-cli/pull/14585

[liesahead]

@alan-agius4 , sure, I will try to create a reproduction.