Solvedangular starter Upgraded to RC7 getting warnings: Critical dependency: the request of a dependency is an expression

I noticed that RC7 was released a couple of hours ago and I have upgraded to it. I now get two warnings in the console and typescript compiler.

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression  

Think once you update this project to RC7 you might get the same warnings? Any ideas how to fix this?

Edit: This is really sloppy, but to get rid of the warnings just comment out line 32 in node_modules/webpack/lib/dependencies/ContextDependencyHelpers.js until proper fix is available.

Edit2: See @Simon-Briggs answer for proper fix.

24 Answers

✔️Accepted Answer

Adding

module:  {
    exprContextCritical: false,
}

to webpack.common.js disables this check and warning message.

Not sure what the proper fix is.

https://webpack.github.io/docs/configuration.html#automatically-created-contexts-defaults-module-xxxcontextxxx

EDIT:
This fixes it

  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    ),
]

angular/angular#11580

Will open a PR for reference.

Other Answers:

A version of this error will surface when upgrading to Angular 4.0.0-rc.1.

WARNING in ./~/@angular/core/@angular/core.es5.js 3702:272-293 Critical dependency: the request of a dependency is an expression

This change in webpack.common.js resolved the issue for me. Credit to Martin Wegner here https://github.com/angular/angular/issues/11580

      new ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('src'), // location of your src
        {
          // your Angular Async Route paths relative to this root directory
        }
      ),

@d3viant0ne This seems still relevant. I'm getting this now, and its over 6 months since reported.
This issue is caused by webpack being unhappy with dynamic imports. The Webpack team states that this is by design:
webpack/webpack-dev-server#212 (comment)

Are the dynamic System.import calls (as called out above on lines 45 and 57) absolutely necessary? Having to shut off a highly recommended piece of webpack feels hacky. I know this is an issue not related to angular, but given that angular and webpack are so closely tied to each other I'd expect them to play nice.

@devspireRoland I had the same problem as you today after updating to Angular 5. I managed to fix it with this code:

webpack.common.js

new webpack.ContextReplacementPlugin( /(.+)?angular(\\|\/)core(.+)?/, root('./src'), {} ),

@d3viant0ne how is this no longer relevant? I'll be honest I'm not using angular2-webpack-starter but I am seeing this error and the plugin solution has worked well for me (though it seemed like a hack). Is this resolved in a better way now? I just pulled all the latest modules from npm.

More Issues: