2

I'm getting these warnings after ng build (Angular 12):

./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:35289:13-34 - Warning: Critical dependency: the request of a dependency is an expression

./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:35301:13-100 - Warning: Critical dependency: the request of a dependency is an expression

I'm using @angular-builders/custom-webpack to extract the moment.js from the initial bundle.

If I disabled the @angular-builders/custom-webpack, then everything goes well and the warnings disappear.

Also, the warnings disappeared if I add the following within custom-webpack.config.js:

new webpack.ContextReplacementPlugin(
    /\@angular(\\|\/)core(\\|\/)__ivy_ngcc__(\\|\/)fesm2015/,
    path.join(__dirname, './src'),
    {}
),

So kindly, what causing these warnings exactly? and is there any other solution to handle it without adding the plugin to the webpack config like above? Thanks.

Amer
  • 6,162
  • 2
  • 8
  • 34

2 Answers2

1

I got the following feedback from the Angular dev team:

This comes from code in the deprecated SystemJsNgModuleLoader and is normally suppressed when using the CLI builders, which also uses ContextReplacementPlugin. I don't think there is an alternative to suppress them, other than to not suppress them and ignore the warnings.

https://github.com/angular/angular/issues/43092#issuecomment-895848535

So I ended up using the mentioned CLI builders code as the following within custom-webpack.config.js:

// Always replace the context for the System.import in angular/core to prevent warnings.
new ContextReplacementPlugin(
    /\@angular(\\|\/)core(\\|\/)/,
    path.join(__dirname, '$_lazy_route_resources'),
    {}
),
Amer
  • 6,162
  • 2
  • 8
  • 34
  • Was getting: `[error] ReferenceError: path is not defined`. Found the answer here: https://stackoverflow.com/a/58802078/134120 – AsGoodAsItGets Nov 05 '21 at 11:28
1

When using a custom ContextReplacementPlugin in Angular 12, take care about this:

If in your custom configuration you specify a plugin that is already added by Angular CLI then by default the two instances will be merged.

I use the ContextReplacementPlugin to exclude moment.js locales. After upgrading to Angular 12, all locales were removed, because it's config was merged with $_lazy_route_resources. I solved it by setting replaceDuplicatePlugins to true.

Benjamin Freitag
  • 443
  • 5
  • 8