Code splitting Angular 8

[aaronte]

🐞 bug report

Affected Package

The issue is caused by package @angular/cli

Is this a regression?

Yes, the previous version in which this bug was not present was 7.3.8.

Description

After the `import` statements have been adjusted by `angular` to use the standard `import()` for lazy loading, the output bundle now is bundling all of my lazy-loaded routes into the main bundle after updating to Angular 8.

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 12.1.0
OS: darwin x64
Angular: 8.1.0-next.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.8
@angular-devkit/build-angular      0.800.3
@angular-devkit/build-ng-packagr   0.800.3
@angular-devkit/build-optimizer    0.13.8
@angular-devkit/build-webpack      0.800.3
@angular-devkit/core               7.3.8
@angular-devkit/schematics         7.3.8
@angular/cdk                       7.3.7
@angular/cli                       8.0.3
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/pwa                       0.13.8
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.3
@schematics/angular                7.3.8
@schematics/update                 0.800.3
ng-packagr                         5.3.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0

[SanderElias]

@aaronte I'm seeing some old packages in your version list. This might well be the cause of it.
Can you check if this issue still exists if you manually update the @angular, @angular-devkit and @schematics to their latest versions?
Please also remove and reinstall your node_modules folder after that change.

For your help, I just quickly updated one of my project to --next
Version list should look like this:

Angular CLI: 8.1.0-beta.2
Node: 10.16.0
OS: linux x64
Angular: 8.1.0-next.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0-beta.2
@angular-devkit/build-angular     0.801.0-beta.2
@angular-devkit/build-optimizer   0.801.0-beta.2
@angular-devkit/build-webpack     0.801.0-beta.2
@angular-devkit/core              8.1.0-beta.2
@angular-devkit/schematics        8.1.0-beta.2
@angular/cli                      8.1.0-beta.2
@ngtools/webpack                  8.1.0-beta.2
@schematics/angular               8.1.0-beta.2
@schematics/update                0.801.0-beta.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.34.0

[alan-agius4]

Hi @aaronte can you please follow the steps mentioned above by @SanderElias?

If the problem persists after upgrading, 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.

[aaronte]

@SanderElias @alan-agius4 I should've provided a repro in the beginning! Apologies! But by making the repro repo, I've found the problem!

My angular project has existed for a long time and not sure if this was just the default before but it doesn't have module defined. This causes the tsconfig to default to module: commonjs. When running the ng update to Angular v8, the automatic update should scripts convert module to be set to esnext. This is required for the new dynamic import loading syntax to work. However, when a project does not have the tsconfig.json in the root of the project like what I had, the script does not automatically update module field which then led to my project not code-splitting properly.

I've added a mimic of folder structure in this example repo. My question is:

• Is the CLI ignoring non-root tsconfig.json even if it's defined in angular.json the correct implementation?
• Is the assumption that all angular workspaces should have a root tsconfig.json?

[alan-agius4]

Hi, @aaronte,

Is the CLI ignoring non-root tsconfig.json even if it's defined in angular.json the correct implementation?

• The problem here, is that you have an addition tsconfig that the application tsconfig is extending from which is not the workspace root tsconfig (https://github.com/aaronte/v7-to-v8-angular-repro-steps/blob/master/projects/main-project/tsconfig.json). We are not resolving extends and we are assuming that if you do extend, eventually it will extend from root tsconfig.

Is the assumption that all angular workspaces should have a root tsconfig.json?
No, as in most cases we will use the tsconfig defined in the angular.json. However, there are certain schematics which do require the root level tsconfig.json. As otherwise, the users will need to config their tsconfig manually, One such case that comes to mind is if you generate libraries, Not having a root level tsconfig will be quite cumbersome get it working and configuration.

I am going to mark this needs further discussion to see if we should resolve the extended tsconfig when doing the migration and not assume that if one an extends in one or more level, it will eventually extend the root level tsconfig. That being said, this is quite a rare case and eventually if the tsconfig is not updated via the migration will lead to a build error, which should be straight forward to fix.

[filipesilva]

We should inform that our tsconfig update fell off the happy path and what the user should do. We probably should compile a comprehensive update list and either display it during the update, or put it on AIO.

[devoto13]

https://github.com/cexbrayat/angular-cli-diff is of a great help, when updating.

[aaronte]

@alan-agius4 Thank you so much for the detailed explanation. I do agree that in the repro step, the build threw an error and was very straightforward to fix. However, in my real application, this error did not occur (It just defaulted to commonjs since module wasn't defined in tsconfig.json) which is probably an even rarer case. I think we're good to close this conversation?

Thank you all again so much!

[alan-agius4]

Closing as per above.

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