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

[liesahead]

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

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.

[liesahead]

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

[liesahead]

Not sure if it's ngrx library fault or angular-cli. I have made a repro here.

ngrx/platform#1905

[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. #14585

[liesahead]

@alan-agius4 , very nice, thanks for fixing it :) should I close the issue or should I wait until your PR gets approved?

[alan-agius4]

Let's leave it open for the time being, it will be autoclosed once the PR get merged.

[paulstelzer]

@alan-agius4 As commented here ng-packagr/ng-packagr#1307 (comment) the problem still exists

[angular-automatic-lock-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.}