Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot set a budget on lazy loaded modules with ng cli 6.0.0 #11019

Closed
sebastieno opened this issue May 25, 2018 · 4 comments · Fixed by #22239
Closed

Cannot set a budget on lazy loaded modules with ng cli 6.0.0 #11019

sebastieno opened this issue May 25, 2018 · 4 comments · Fixed by #22239

Comments

@sebastieno
Copy link

Defining budget for a lazy loaded module doesn't work with ng cli 6.0.0

Versions

Angular CLI: 6.0.0
Node: 9.5.0
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-ng-packagr   0.6.0
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.0
@angular/pwa                       0.6.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.0
@schematics/package-update         <error>
@schematics/update                 0.6.0
ng-packagr                         3.0.0-rc.2
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.6.0

Repro steps

  • Defines an application with lazyloaded modules
  • Declare in angular.json file a budget for one of the lazy loaded module (I tried several names, based on a lazy loaded module named st-account
"budgets": [
  {"type": "bundle", "name": "st-account", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "1.7d269d24f67b262c9dc9.js", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "StAccount", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "StAccount#Module", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "StAccountModule", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account-src-lib-st-account.module#StAccountModule", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account/src/lib/st-account.module#StAccountModule", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account/src/lib/st-account.module", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account-src-lib-st-account.module", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account-src-lib-st-account-module", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "st-account-src-lib-st-account-module-ngfactory", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" },
  {"type": "bundle", "name": "1", "baseline": "1kb", "maximumWarning": "1kb", "maximumError": "2kb" }
]
  • Run ng build --prod

Observed behavior

No error or warning is shown.

Desired behavior

An error or warning should be shown based on budget

Mention any other details that might be useful (optional)

If I run ng build --prod --named-chunks, a warning/error is shown based on the st-account-src-lib-st-account-module-ngfactory budget rule.

@alan-agius4
Copy link
Collaborator

I have looked at this and for a temporary workaround you need to use namedChunks as at the moment, we using the name of the chunk to find the bundle that we want to compare with.

Example.

    {"type": "bundle", "name": "customers-customers-module-ngfactory", "maximumError": "1" }

@coder925
Copy link

In addition to the current need for --named-chunks, as I see it, one need to also add --no-common-chunk in order to practically be able to manage budgets for all of your lazy loaded feature modules.

@alan-agius4
Copy link
Collaborator

Looks like the above no longer works since the introduction of Webpack 5 in version 12.

@alan-agius4 alan-agius4 self-assigned this Nov 25, 2021
dgp1130 pushed a commit that referenced this issue Nov 29, 2021
Since the introduction of Webpack 5 in version 12 bundle budgets for lazy chunks  have been broken due to the removal of the `NamedLazyChunksPlugin`. https://github.com/angular/angular-cli/blob/21a49e6492dda1c4a325c0339518c3c110880d02/packages/angular_devkit/build_angular/src/webpack/plugins/named-chunks-plugin.ts#L8

With this change we re-introduce a similar plugin to allow setting bundle budgets on lazy chunks.

This issue has also been reported on Slack by a GDE https://angular-team.slack.com/archives/C08M4JKNH/p1637115196222300

Closes: #11019
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants