CODEWITHSUNDEEP
angularwebpackangular12angular-builder
Amer
Amer

Reputation: 6716

Angular 12 warning Critical dependency: the request of a dependency is an expression

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.

Upvotes: 2

Views: 6375

Answers (2)

Benjamin Freitag
Benjamin Freitag

Reputation: 603

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.

Upvotes: 1

Amer
Amer

Reputation: 6716

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'),
    {}
),

Upvotes: 1

Related Questions