Webpack Warning in system_js_ng_module_factory_loader.js

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

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

Is this happening to someone else?
Thanks!

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)

@gdi2290

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

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)

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!

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

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

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

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

fix: Angular2 dependency warning

@gdi2290

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

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')
    )

build: remove workaround for angular issue #11580

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

Hi I am unable to solve this warning as well as error.

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

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

ERROR in /node_modules/amazing-time-picker/node_modules/@angular/core/src/render3/interfaces/view.d.ts (122,5): A computed property name in an interface must directly refer to a built-in symbol.
ERROR in /node_modules/amazing-time-picker/node_modules/@angular/core/src/render3/interfaces/container.d.ts (35,5): A computed property name in an interface must directly refer to a built-in symbol.
ERROR in 26/node_modules/amazing-time-picker/node_modules/@angular/core/src/render3/interfaces/container.d.ts (45,5): A computed property name in an interface must directly refer to a built-in symbol.

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)

I have tried to find the above webpack.config.js in my Angular 4 project, which was created using the CLI, but to no avail.

The only file that I can find and which comes close is webpack.js under --> node_modules@angular-devkit\build-angular\src\angular-cli-files\plugins\webpack.js and there is no code that resembles what is mentioned in above post, listed as a feasible solution to the error.

Console gave me the following result after having used the npm update command on my Angular project...

...which broke the app, essentially leading to this dead end.

I have tried to update manually the two first dependencies by running their respective npm install commands but this didn't result in any change of behavior. I still receive the same error and am stuck.

I would appreciate if someone could provide help and guidance to resolve this issue as I cannot move ahead with the project until I resolve this.

Thanks in advance.

EDIT: In case it matters, I tried creating a new Angular 4 project and there isn't any issue compiling the new app. So the question is simply, how to do a rollback or fix the above error report. I could move the syntax over but would prefer to learn how to fix the issue, should the problem arise again in the future, as well as to better understand the built itself.

In regards to my previous question, I found a workaround. I changed the nomination of the following line's variable in view.js from var fn = require(mod).__express to const fn = require(mod).__express and the rendering of pages now works again. Don't know if that is 'best practices' but nevertheless, everything functions again like before. If someone could give some input on whether or not that means anything in terms of future development/issues down the road, that'd be swell. Thanks.

CLI no longer uses SystemJS and I have not seen these warnings. Closing as I believe that this issue is out of date.
If this is still an issue please comment here with an reproduction on the latest Angular.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Webpack Warning in system_js_ng_module_factory_loader.js #11580

73 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Webpack Warning in system_js_ng_module_factory_loader.js #11580

Description

Activity

supermarcos commented on Sep 14, 2016

PatrickJS commented on Sep 14, 2016

supermarcos commented on Sep 14, 2016

PatrickJS commented on Sep 14, 2016

supermarcos commented on Sep 14, 2016

robwormald commented on Sep 14, 2016

Tragetaschen commented on Sep 14, 2016

jtsom commented on Sep 14, 2016

dcchristopher commented on Sep 18, 2016

kahboom commented on Sep 27, 2016

73 remaining items

joebri commented on Jun 28, 2018

kimamula commented on Aug 20, 2018

sandeepKr54 commented on Sep 27, 2018

zoezydk commented on Oct 30, 2018

zoezydk commented on Oct 31, 2018

petebacondarwin commented on Oct 26, 2020

angular-automatic-lock-bot commented on Nov 26, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions