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

[ghost]

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.

[asadsahi]

Same issue here...I upgraded webpack to beta.22 and latest versions of dev server and dev middleware too.

[spock123]

I just get this: ( beta.21)

module build failed: Error: Debug Failure. False expression: Output generation failed
    at Object.assert (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/typescript/lib/typescript.js:2406:23)
    at Object.transpileModule (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/typescript/lib/typescript.js:54350:18)
    at State.fastEmit (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/host.ts:264:39)
    at transform (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:164:28)
    at transformationFunction (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:89:48)
    at compiler (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:105:34)
    at Object.loader (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:18:18)
 @ ./src/frontend/app async .*\.ts
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/frontend/app/vendors.ts
 @ multi vendor

[Simon-Briggs]

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.

[rweng]

Just FYI, for me the ContextReplacementPlugin caused watchers (like ts-fork-checker and karma) to trigger more often. I had it during normal development, but since it usually only triggered the ts-fork-checker twice it wasn't bothering me. However, right now I am in the process of switching from plain node mocha tests to karma, and there the plugin triggers watch like 5 times directly after each other w/o real file changes.

[Mellbourn]

@Simon-Briggs Regarding the changes you suggest, could you clarify exactly where the files are that are supposed to be changed?
Thanks!

[Simon-Briggs]

@Mellbourn If you're using WebPack to do your builds it'll be in the webpack config file under a section called plugins. For this repo the config file is in config/webpack.common.js

[Mellbourn]

@Simon-Briggs I'm using Angular-CLI, so there is no config folder.

[Simon-Briggs]

@Melbourn. Angular CLI uses webpack but hides the config file from the user as its all preconfigured. If you update your version of angular CLI, it should just work.

[georgeedwards]

@Simon-Briggs Not sure what I'm doing wrong, but by adding your solution to my webpack.common.js, so I have:

plugins: [
      new AssetsPlugin({
        path: helpers.root('dist'),
        filename: 'webpack-assets.json',
        prettyPrint: true
      }),

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

      new ForkCheckerPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse()
      }),

      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)client|client)(\\|\/)linker/,
        helpers.root('client') // location of your client
      ),

      new CopyWebpackPlugin([{
        from: 'client/assets',
        to: 'assets'
      }], {
          ignore: [
            'humans.txt',
            'robots.txt'
          ]
        }),
      new CopyWebpackPlugin([{
        from: 'client/assets/robots.txt'
      }, {
        from: 'client/assets/humans.txt'
      }]),

I still get:

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

When running my tests...

[Simon-Briggs]

@georgeedwards
Ah. You'll need to put the exact same code in your webpack.test.js plugins section as well.

[joshwiens]

Resolving: no longer relevant

[adam-beck]

@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.

[kenjiqq]

Using the ContextReplacementPlugin hack causes webpack to start watching the folder you pass to it for any changes. So if __dirname is your project root it will watch any file in your project for changes it seems.
This triggered insane amount of rebuilds for me because it startet to rebuild on any change in the .git folder.

[gregbown]

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

[dudewad]

@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.

[Rinkink]

@gregbown Thank you, your solution solved it for me. Currently on Angular 4.0.1.

[damnko]

@gregbown could you please provide an example on how to populate the // your Angular Async Route paths relative to this root directory part of the ContextReplacementPlugin plugin?

Let's say I have /config/webpack.common.js that's loaded from /webpack.config.js and the lazy loaded module lives in /src/app/lazy/lazy.module.ts what should I write there as path?

Thanks

[ghost]

Upgraded to Angular 4 because everybody said it was easy and non breaking.
2 days later & I'm still trying to fix this error.

This is my plugins section
` new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)

//Supposed fix
new webpack.ContextReplacementPlugin(/angular(|/)core(|/)@angular/, path.resolve(__dirname, './ClientApp')),

//Origanal ---> new webpack.ContextReplacementPlugin(/@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for angular/angular#11580

new webpack.IgnorePlugin(/^vertx$/) // Workaround for stefanpenner/es6-promise#100
`

[krojew]

Can this be reopened? I'm having the same error with 4.4.3.

[rpanitzek]

This is still very relevant. I'am working with the latest version of angular and I have this all the time:

WARNING in ./node_modules/@angular/core/@angular/core.es5.js
5675:15-102 Critical dependency: the request of a dependency is an expression

If I use the contextreplacement hack the warning is gone - but watch and reload do not work properly anymore. It restarts all the time.

[christianlundberg]

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

[FrancescoBorzi]

@clundberg1 I have the same issue just after upgrading to Angular 5. But I don't have a webpack.common.js file. Where should I look?

[ghiscoding]

@ShinDarth I'm in the same boat using Angular-CLI, if you have a solution please let us know. Thanks