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.

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