New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack Warning in system_js_ng_module_factory_loader.js #11580

Open
supermarcos opened this Issue Sep 14, 2016 · 72 comments

Comments

@supermarcos

supermarcos commented Sep 14, 2016

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

webpack_warning

Current behavior
When compiling using webpack, in angular rc7 core libraries there are a couple of warnings.

Expected behavior
I guess no warnings... :-)

Reproduction of the problem
Install a bare project, the simplest you like using webpack with the Angular2 rc7 revision and you will get the warnings.

Please tell us about your environment:
All the last versions of Angular2 rc7, typings, ts and webpack related dependencies. All of them on the latest versions npm has.

  • Angular version:
    2.0.0-rc.7
@supermarcos

This comment has been minimized.

Show comment
Hide comment
@supermarcos

supermarcos Sep 14, 2016

Is this happening to someone else?
Thanks!

supermarcos commented Sep 14, 2016

Is this happening to someone else?
Thanks!

@gdi2290

This comment has been minimized.

Show comment
Hide comment
@gdi2290

gdi2290 Sep 14, 2016

Member

you need to provide context to Angular's use of System.import

      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        root('./src'), // location of your src
        {} // a map of your routes 
      ),

update:
the path changed to
/angular(\\|\/)core/
update:
#11580 (comment)

github-tipe-logo

Member

gdi2290 commented Sep 14, 2016

you need to provide context to Angular's use of System.import

      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        root('./src'), // location of your src
        {} // a map of your routes 
      ),

update:
the path changed to
/angular(\\|\/)core/
update:
#11580 (comment)

github-tipe-logo

@supermarcos

This comment has been minimized.

Show comment
Hide comment
@supermarcos

supermarcos Sep 14, 2016

Thanks for your prompt answer, @gdi2290 , sorry if I am asking something stupid, but... where should I do that? Webpack config maybe? Thanks again!

supermarcos commented Sep 14, 2016

Thanks for your prompt answer, @gdi2290 , sorry if I am asking something stupid, but... where should I do that? Webpack config maybe? Thanks again!

@gdi2290

This comment has been minimized.

Show comment
Hide comment
@gdi2290

gdi2290 Sep 14, 2016

Member

webpack.config.js

module.exports = {
  plugins: [
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core/,
        root('./src'), // location of your src
        { }
      )
  ]
}
function root(__path) {
  return path.join(__dirname, __path);
}

or

new webpack.ContextReplacementPlugin(
  /angular(\\|\/)core/,
  path.resolve(__dirname, 'src'), // path to your src
  {}
)

update:
#11580 (comment)

github-tipe-logo

Member

gdi2290 commented Sep 14, 2016

webpack.config.js

module.exports = {
  plugins: [
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core/,
        root('./src'), // location of your src
        { }
      )
  ]
}
function root(__path) {
  return path.join(__dirname, __path);
}

or

new webpack.ContextReplacementPlugin(
  /angular(\\|\/)core/,
  path.resolve(__dirname, 'src'), // path to your src
  {}
)

update:
#11580 (comment)

github-tipe-logo

@supermarcos

This comment has been minimized.

Show comment
Hide comment
@supermarcos

supermarcos Sep 14, 2016

Fantastic! Yep, that was the missing piece. Thank you very much!
Just one last question, why before with the RC6 I didn't get those warning and with the RC7 I do?
What is the actual purpose of that plugin?

Thank you very much for your help! You're a legend!

supermarcos commented Sep 14, 2016

Fantastic! Yep, that was the missing piece. Thank you very much!
Just one last question, why before with the RC6 I didn't get those warning and with the RC7 I do?
What is the actual purpose of that plugin?

Thank you very much for your help! You're a legend!

@robwormald

This comment has been minimized.

Show comment
Hide comment
@robwormald

robwormald Sep 14, 2016

Member

i'm going to reopen this, as we're tracking what to do about it.

Member

robwormald commented Sep 14, 2016

i'm going to reopen this, as we're tracking what to do about it.

@Tragetaschen

This comment has been minimized.

Show comment
Hide comment
@Tragetaschen

Tragetaschen Sep 14, 2016

Contributor

This bug doesn't yet mention the actual warning (it's only in the OP's image), so you cannot find it by searching:

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

Contributor

Tragetaschen commented Sep 14, 2016

This bug doesn't yet mention the actual warning (it's only in the OP's image), so you cannot find it by searching:

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

@jtsom

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Sep 14, 2016

Except this error, for me, is happening in an Angular-cli app, while running tests with ng test.. there is no webpack config file...

jtsom commented Sep 14, 2016

Except this error, for me, is happening in an Angular-cli app, while running tests with ng test.. there is no webpack config file...

@dcchristopher

This comment has been minimized.

Show comment
Hide comment
@dcchristopher

dcchristopher Sep 18, 2016

@jtsom Mind you, this is just a warning, not an error. However, like you, I was also getting that warning while at the same time getting some new errors in my karma tests (ng test). Like you, I have an app created with angular-cli. At first I thought the warning and the errors were related but undoing my recent changes disproved that theory. I had just recently added angular2-material and my unit tests were failing with errors like "template parse errors: md-whatever". I just had to update my unit tests (the beforeEach section in particular) and add all the referenced angular2-material providers and components used in each respective component class. I hope this helps you as well! The errors are definitely not very helpful and it took me longer than I care to admit to resolve this.

dcchristopher commented Sep 18, 2016

@jtsom Mind you, this is just a warning, not an error. However, like you, I was also getting that warning while at the same time getting some new errors in my karma tests (ng test). Like you, I have an app created with angular-cli. At first I thought the warning and the errors were related but undoing my recent changes disproved that theory. I had just recently added angular2-material and my unit tests were failing with errors like "template parse errors: md-whatever". I just had to update my unit tests (the beforeEach section in particular) and add all the referenced angular2-material providers and components used in each respective component class. I hope this helps you as well! The errors are definitely not very helpful and it took me longer than I care to admit to resolve this.

@kahboom

This comment has been minimized.

Show comment
Hide comment
@kahboom

kahboom Sep 27, 2016

Many thanks @gdi2290, that resolved the error for me. 👍

kahboom commented Sep 27, 2016

Many thanks @gdi2290, that resolved the error for me. 👍

@ClementVidal

This comment has been minimized.

Show comment
Hide comment
@ClementVidal

ClementVidal Oct 23, 2016

I'm having the same issue.
Using angular 2.2.1 and webpack@2.1.0-beta.25 without angular-cli.
The webpack.ContextReplacementPlugin does the trick.

I wasn't having this problem with webpack 1.

Do you have any inputs about this issue ?

ClementVidal commented Oct 23, 2016

I'm having the same issue.
Using angular 2.2.1 and webpack@2.1.0-beta.25 without angular-cli.
The webpack.ContextReplacementPlugin does the trick.

I wasn't having this problem with webpack 1.

Do you have any inputs about this issue ?

@Martin-Wegner

This comment has been minimized.

Show comment
Hide comment
@Martin-Wegner

Martin-Wegner Oct 24, 2016

@ClementVidal the solution is:

gdi2290 commented on 14 Sep

Martin-Wegner commented Oct 24, 2016

@ClementVidal the solution is:

gdi2290 commented on 14 Sep

@ClementVidal

This comment has been minimized.

Show comment
Hide comment
@ClementVidal

ClementVidal Oct 24, 2016

So is this the 'official' solution or just a temporary fix ?
Why this context plugin wasn't needed in webpack 1 ?
Thanks

ClementVidal commented Oct 24, 2016

So is this the 'official' solution or just a temporary fix ?
Why this context plugin wasn't needed in webpack 1 ?
Thanks

@Martin-Wegner

This comment has been minimized.

Show comment
Hide comment
@Martin-Wegner

Martin-Wegner Oct 25, 2016

@ClementVidal I really don't know. But the issue was never closed therefore more a temporary fix...

Martin-Wegner commented Oct 25, 2016

@ClementVidal I really don't know. But the issue was never closed therefore more a temporary fix...

@pulakb

This comment has been minimized.

Show comment
Hide comment
@pulakb

pulakb Dec 23, 2016

@gdi2290 I am using this Angular class's Angular2 Webpack starter with Angular 2.0.0 and still getting the warning '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
'

But in webpack.common.js the following code is present:

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

pulakb commented Dec 23, 2016

@gdi2290 I am using this Angular class's Angular2 Webpack starter with Angular 2.0.0 and still getting the warning '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
'

But in webpack.common.js the following code is present:

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

@alexandrehebert

This comment has been minimized.

Show comment
Hide comment
@alexandrehebert

alexandrehebert Jan 3, 2017

@pulakb have you checked if the code removing the warning is also present in your webpack.test.js ?

alexandrehebert commented Jan 3, 2017

@pulakb have you checked if the code removing the warning is also present in your webpack.test.js ?

@ido-ran

This comment has been minimized.

Show comment
Hide comment
@ido-ran

ido-ran Nov 14, 2017

When we upgrade from version 4 to version 5 we had to replace the pattern in ContextReplacementPlugin from /angular(\\|\/)core(\\|\/)@angular/ to /(.+)?angular(\\|\/)core(.+)?/.

The full plugin (copied from gdi2290/angular-starter#1913):

new ContextReplacementPlugin(
        /**
         * The (\\|\/) piece accounts for path separators in *nix and Windows
         */
        /(.+)?angular(\\|\/)core(.+)?/,
        helpers.root('src'), // location of your src
        {
          /**
           * Your Angular Async Route paths relative to this root directory
           */
        }

ido-ran commented Nov 14, 2017

When we upgrade from version 4 to version 5 we had to replace the pattern in ContextReplacementPlugin from /angular(\\|\/)core(\\|\/)@angular/ to /(.+)?angular(\\|\/)core(.+)?/.

The full plugin (copied from gdi2290/angular-starter#1913):

new ContextReplacementPlugin(
        /**
         * The (\\|\/) piece accounts for path separators in *nix and Windows
         */
        /(.+)?angular(\\|\/)core(.+)?/,
        helpers.root('src'), // location of your src
        {
          /**
           * Your Angular Async Route paths relative to this root directory
           */
        }

@jmesa-sistel jmesa-sistel referenced this issue Nov 17, 2017

Closed

Update to Angular 5 #6664

0 of 4 tasks complete
@MohsinGhani

This comment has been minimized.

Show comment
Hide comment
@MohsinGhani

MohsinGhani Nov 18, 2017

new webpack.ContextReplacementPlugin(
/angular(\|/)core(\|/)/,
path.resolve('./src'),
{}
)
This is worked for me

MohsinGhani commented Nov 18, 2017

new webpack.ContextReplacementPlugin(
/angular(\|/)core(\|/)/,
path.resolve('./src'),
{}
)
This is worked for me

@stevethemacguy

This comment has been minimized.

Show comment
Hide comment
@stevethemacguy

stevethemacguy Nov 21, 2017

A word of caution: Using ContextReplacementPlugin breaks lazy loading of child routes in AOT builds built with @ngtools/webpack (at least it does for me). If you use ContextReplacementPlugin, make sure this code is in webpack.dev.js (not webpack.common or prod).

As of Ang: 5.0.2, Webpack: 3.4.1, and @ngtools/webpack: 1.8.3

stevethemacguy commented Nov 21, 2017

A word of caution: Using ContextReplacementPlugin breaks lazy loading of child routes in AOT builds built with @ngtools/webpack (at least it does for me). If you use ContextReplacementPlugin, make sure this code is in webpack.dev.js (not webpack.common or prod).

As of Ang: 5.0.2, Webpack: 3.4.1, and @ngtools/webpack: 1.8.3

@ghost ghost referenced this issue Nov 28, 2017

Open

upgrade to 5 version #3

@KhaledSMQ

This comment has been minimized.

Show comment
Hide comment
@KhaledSMQ

KhaledSMQ Dec 9, 2017

Thank you @gdi2290 that help me to solve this problem

KhaledSMQ commented Dec 9, 2017

Thank you @gdi2290 that help me to solve this problem

@ileler

This comment has been minimized.

Show comment
Hide comment
@ileler

ileler Dec 12, 2017

@gdi2290 hello,Where can I modify this webpack.config.js, please?My project from ng new and i don't want to use eject model

ileler commented Dec 12, 2017

@gdi2290 hello,Where can I modify this webpack.config.js, please?My project from ng new and i don't want to use eject model

@fahadhaq

This comment has been minimized.

Show comment
Hide comment
@fahadhaq

fahadhaq Dec 19, 2017

can anyone explain where I need to change this? I have checked the webpack.config.js but i dont have any of the code mentioned in this post :( please help

fahadhaq commented Dec 19, 2017

can anyone explain where I need to change this? I have checked the webpack.config.js but i dont have any of the code mentioned in this post :( please help

@AhHa45

This comment has been minimized.

Show comment
Hide comment
@AhHa45

AhHa45 Feb 21, 2018

@fahadhaq you need to add that code into the config.plugins array in your webpack.config.js

new webpack.ContextReplacementPlugin(
        // if you have anymore problems tweet me at @gdi2290
        // The (\\|\/) piece accounts for path separators for Windows and MacOS
        /(.+)?angular(\\|\/)core(.+)?/,
        root('./src'), // location of your src
        {} // a map of your routes 
      )

AhHa45 commented Feb 21, 2018

@fahadhaq you need to add that code into the config.plugins array in your webpack.config.js

new webpack.ContextReplacementPlugin(
        // if you have anymore problems tweet me at @gdi2290
        // The (\\|\/) piece accounts for path separators for Windows and MacOS
        /(.+)?angular(\\|\/)core(.+)?/,
        root('./src'), // location of your src
        {} // a map of your routes 
      )

JeromeBadt added a commit to JeromeBadt/photon-cycles that referenced this issue Apr 27, 2018

Update webpack config
- Use laravel mix
- Bundle polyfills
- Add ContextReplacementPlugin to provide context for Angular's use of System.import
    - see angular/angular#11580 (comment)

JeromeBadt added a commit to JeromeBadt/photon-cycles that referenced this issue Apr 27, 2018

Update webpack config
- Use laravel mix
- Bundle polyfills
- Add ContextReplacementPlugin to provide context for Angular's use of System.import
    - see angular/angular#11580 (comment)
@sirajc

This comment has been minimized.

Show comment
Hide comment
@sirajc

sirajc May 17, 2018

Getting this warning in Angular 6 with CLI now

WARNING in ../node_modules/@angular/core/fesm5/core.js
5569:15-36 Critical dependency: the request of a dependency is an expression

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

Angular CLI: 6.0.2
Node: 8.11.1
OS: darwin x64
Angular: 6.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.2
@angular-devkit/build-angular 0.6.2
@angular-devkit/build-optimizer 0.6.2
@angular-devkit/core 0.6.2
@angular-devkit/schematics 0.6.2
@ngtools/webpack 6.0.2
@schematics/angular 0.6.1
@schematics/update 0.6.2
rxjs 6.1.0
typescript 2.7.2
webpack 4.8.3

sirajc commented May 17, 2018

Getting this warning in Angular 6 with CLI now

WARNING in ../node_modules/@angular/core/fesm5/core.js
5569:15-36 Critical dependency: the request of a dependency is an expression

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

Angular CLI: 6.0.2
Node: 8.11.1
OS: darwin x64
Angular: 6.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.2
@angular-devkit/build-angular 0.6.2
@angular-devkit/build-optimizer 0.6.2
@angular-devkit/core 0.6.2
@angular-devkit/schematics 0.6.2
@ngtools/webpack 6.0.2
@schematics/angular 0.6.1
@schematics/update 0.6.2
rxjs 6.1.0
typescript 2.7.2
webpack 4.8.3

@bilal1994

This comment has been minimized.

Show comment
Hide comment
@bilal1994

bilal1994 commented May 22, 2018

image

@bilal1994

This comment has been minimized.

Show comment
Hide comment
@bilal1994

bilal1994 May 22, 2018

What is the problem?

bilal1994 commented May 22, 2018

What is the problem?

Endgegner pushed a commit to Endgegner/web-fe-config-app that referenced this issue Jun 9, 2018

@samialmorshedi

This comment has been minimized.

Show comment
Hide comment
@samialmorshedi

samialmorshedi Jun 17, 2018

I still have this kind of problem and do not know how to fix it!!

capture

samialmorshedi commented Jun 17, 2018

I still have this kind of problem and do not know how to fix it!!

capture

@thedewpoint

This comment has been minimized.

Show comment
Hide comment
@thedewpoint

thedewpoint Jun 23, 2018

@sirajc did you resolve that warning? experiencing the same thing.

thedewpoint commented Jun 23, 2018

@sirajc did you resolve that warning? experiencing the same thing.

@joebri

This comment has been minimized.

Show comment
Hide comment
@joebri

joebri Jun 28, 2018

Also interested in finding a fix. I thought updating esm5 to fesm5 in the webpack config might do the trick... but no joy.

new webpack.ContextReplacementPlugin(
        /\@angular(\\|\/)core(\\|\/)fesm5/,
        helpers.root('./src')
    )

joebri commented Jun 28, 2018

Also interested in finding a fix. I thought updating esm5 to fesm5 in the webpack config might do the trick... but no joy.

new webpack.ContextReplacementPlugin(
        /\@angular(\\|\/)core(\\|\/)fesm5/,
        helpers.root('./src')
    )

chrisbruford added a commit to chrisbruford/knight-companion that referenced this issue Aug 12, 2018

chrisbruford added a commit to chrisbruford/knight-companion that referenced this issue Aug 16, 2018

@kimamula

This comment has been minimized.

Show comment
Hide comment
@kimamula

kimamula Aug 20, 2018

I am not clear if I can safely ignore the warning messages.
My app looks working correctly with or without the ContextReplacementPlugin workaround.

kimamula commented Aug 20, 2018

I am not clear if I can safely ignore the warning messages.
My app looks working correctly with or without the ContextReplacementPlugin workaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment