Angular: Webpack Warning in system_js_ng_module_factory_loader.js

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:
https://github.com/angular/angular/issues/11580#issuecomment-327338189

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:
https://github.com/angular/angular/issues/11580#issuecomment-327338189

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

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

I'm having the same issue.
Using angular 2.2.1 and [email protected] 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 the solution is:

gdi2290 commented on 14 Sep

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

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

@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 have you checked if the code removing the warning is also present in your webpack.test.js ?

I'm seeing this after upgrading to Webpack 2.2.0, no warnings on Webpack 1.

The code @gdi2290 posted fixes it but I'd rather not have it in my config.

Why is it happening anyway?

The ContextReplacementPlugin hack/fix made my memory usage jump from 300Mb to 1.1Gb (using webpack watch).
Also it seems to trigger the watchers more often (might be the reason of that additional memory consumption).
I really would like to get rid of it, so is there another workaround?
This comment suggests to add

module:  {
    exprContextCritical: false
}

in webpack config, but I'd like to have more insights on this issue before changing anything else :)

With angular 2.4.4 i don't get this warning anymore, can anybody confirm this?

My webpack config: https://github.com/cebor/ng2-start/blob/master/webpack.config.js

@cebor I have this warning with angular 2.4.4 and webpack 2.2.0

@girokon which loader do you use for typescript and which tsc version ?

@cebor

[email protected]
[email protected]

//from webpack.common.conf
               {
                    test: /\.ts$/,
                    use: ['@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd, 'awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader']
                },

//tsconfing.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": ["es2015", "dom", "es2016"]
    },
    "exclude": [
        "node_modules"
    ]
}

hmm, i use '@ngtools/webpack' for compiling *.ts files ...

Keep in mind that if you are using the ContextReplacementPlugin workaround this causes webpack to watch any file in the folder you provide for changes.
I ended up triggering rebuilds because of .git folder changes

Seems to work to just use a folder that doesn't exist to avoid this.

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

@kenborge thx man

@kenborge thanks for that. It's unfortunate that problems like this are still an issue. Has this been fixed in any recent versions?

From Angular 4.0.0-beta.8 to 4.0.0-rc.1 the behaviour changed:

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

is not needed anymore.

But now I get:

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

WARNING in ./~/@angular/core/@angular/core.es5.js
3705:332-415 Critical dependency: the request of a dependency is an expression

So the new solution is:

new webpack.ContextReplacementPlugin(
  /angular(\\|\/)core(\\|\/)@angular/,
  path.resolve(__dirname, '../src')
)

@Martin-Wegner Thank you! Your fix worked great! I started getting this warning after updating to Angular 4.0.0-rc.1. Unrelated, switching to 4.0.0-rc.1 reduced my bundle sizes by over 10%

@ssougnez with Angular 4.0.0-rc.1/Angular 4.0.0-rc.2 and webpack 2.2.1 I have the warning. At which point does your webpack config differs from the offical documentation (https://angular.io/docs/ts/latest/guide/webpack.html)?

Sorry, I just deleted my message because apparently I missed the warning when I tried. I confirm that it is still there and can be fixed by the work around above. Sorry :-$

new ContextReplacementPlugin(
  /angular(\\|\/)core(\\|\/)@angular/,
  path.resolve(__dirname, '../src')
)

Works for me for webpack in webpack.common.js

Does not work for me with angular 4 final.

    WARNING in ./~/@angular/core/bundles/core.umd.js
    5896:15-36 Critical dependency: the request of a dependency is an expression

    WARNING in ./~/@angular/core/bundles/core.umd.js
    5912:15-102 Critical dependency: the request of a dependency is an expression

Same error with or without above workaround.

Webpack 2.3.2

@hheexx I'm using Angular 4 final and webpack 2.3.2 and get no warning...

I had to use

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

within webpack.common.js using webpack 2.3.1.

I use SSR.

So I ended up having to use /angular(\|\/)core(\|\/)@angular/ for my browser bundle and /\@angular\b.*\b(bundles|linker)/ for my node bundle.

Not sure why but now it works.

I have this issue and have tried the workaround with "src", "client" (where all my code is), and "". I still get the warnings in all cases.
webpack 2.3.2
Originally I just had root: "" instead of the path.resolve(...) and it had the same error.
Angular 4.0.1
Essentially, the ContextReplacementPlugin is doing NOTHING at all. I get the same warning with it totally commented out.

The fix works for me as well:

plugins: [
    new webpack.ContextReplacementPlugin(
        angular(\\|\/)core(\\|\/)@angular/,
        appRoot.resolve('./src'),
        {}
    )
]

I had the same issue trying to run tests and, of course, then remembered that webpack.test.js as duplicated from the Angular documentation has its own webpack plugin settings.

• Webpack 2.3.2
• Angular 4.0.1

The above solution only worked for me when I put an extra forward slash in front of "angular". Can anybody here answer the original question and point towards an "idiot's guide" explanation of what's happening here and why changes are needed. I started my project with Angular 2.4.9 and webpack v2.2.2 which, using angular-seed gave me the following plugins section:

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
      path.resolve(__dirname, './src'),
      {
        // your Angular Async Route paths relative to this root directory
      }
    ),
  ],

I upgraded to Angular 4.0.1 and Webpack 2.3.3 and that started giving me two of these warnings:

WARNING in ./~/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression

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

These have been removed (finally!) by replacing my plugins section to read:

plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        path.resolve('./src'),
        {}
    )
],

But it feels like I'm performing random voodoo here (eg. why was the extra forward slash needed over and above the fix in the comment above this one?) and fully expect something to break again the next time I run npm outdated and decide to try and get everything more current.

@FastAndFluid No voodoo, the example from @winglerw28 was simply missing a /. The /.../ notation is a regex string.

Can anyone able to tell me why we need to change this. Before I upgrade my application to Angular4, I need not required this. What exactly reason behind this changes?

replacing angular(\|\/)core(\|\/)src(\|\/)linker/, to /angular(\|\/)core(\|\/)@angular/, remove my warning but just want to know that what changes needed this replacement.

my angular version is 4.0.2, webpack@^2.3.3

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

is ok.

I have just upgraded from Angular 2.4.10 to Angular 4.0.1 and I am also receiving the warnings ...

`WARNING in ./~/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression

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

The fixes in this thread involving modifications to webpack.config.js (see FastAndFluid's comment above) DO NOT work for me because I am using angular-cli 1.0.0-beta.31 without webpack. As per this thread, the CLI team is not going to expose webpack config from the cli.

So, how can I fix this problem without webpack?

@grugknuckle Given it's a webpack error, I imagine you should raise it with the CLI team as it would be their job to fix it if they are not exposing it.

Hi,

I am facing the same issue. Please try below mention changes in
webpack.common.js

replace /*angular(\|\/)core(\|\/)src(\|\/)linker/, *with
*/angular(\|\/)core(\|\/)@angular/,
. *

It's worked for me.

http://www.globant.com/
Bankim Sutaria
Sr Web UI Developer

Email: bankim.[email protected]

*Mobile: *+919075009438 | +918411938906
[image: Facebook] http://www.facebook.com/Globant [image: Twitter]
http://twitter.com/globant [image: Linkedin]
http://www.linkedin.com/company/globant [image: Youtube]
http://www.youtube.com/globant

Disclaimer - This message is for the designated recipient only and may
contain privileged, proprietary, or otherwise confidential information. If
you have received it in error, please notify the sender immediately and
delete the original. Any other use of the e-mail by you is prohibited.

On Wed, Apr 19, 2017 at 7:43 PM, grugknuckle notifications@github.com
wrote:

I have just upgraded from Angular 2.4.10 to Angular 4.0.1 and I am also
receiving the warnings ...

`WARNING in ./~/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an
expression

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

The fixes in this thread involving modifications to webpack.config.js (see
FastAndFluid's comment above) DO NOT work for me because I am using
angular-cli 1.0.0-beta.31 without webpack. As per this thread
https://github.com/angular/angular-cli/issues/1656#issuecomment-240171375,
the CLI team is not going to expose webpack config from the cli.

So, how can I fix this problem without webpack?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular/issues/11580#issuecomment-295284216,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYWHxTX3hTs3JVFTwaXMV1Ub_lHPogp1ks5rxhaigaJpZM4J8Sjt
.

--

The information contained in this e-mail may be confidential. It has been
sent for the sole use of the intended recipient(s). If the reader of this
message is not an intended recipient, you are hereby notified that any
unauthorized review, use, disclosure, dissemination, distribution or
copying of this communication, or any of its contents,
is strictly prohibited. If you have received it by mistake please let us
know by e-mail immediately and delete it from your system. Many thanks.

La información contenida en este mensaje puede ser confidencial. Ha sido
enviada para el uso exclusivo del destinatario(s) previsto. Si el lector de
este mensaje no fuera el destinatario previsto, por el presente queda Ud.
notificado que cualquier lectura, uso, publicación, diseminación,
distribución o copiado de esta comunicación o su contenido está
estrictamente prohibido. En caso de que Ud. hubiera recibido este mensaje
por error le agradeceremos notificarnos por e-mail inmediatamente y
eliminarlo de su sistema. Muchas gracias.

@dantheman999301 fair point.

UPDATE: After upgrading angular-cli from @angular/cli 1.0.0-beta31 to @angular/cli 1.0.0 it fixed the problem.

Thank you @hheexx.Your solution worked for me.I used /angular(\|/)core(\|/)@angular/ for my browser bundle and /@angular\b.*\b(bundles|linker)/ for my node bundle.No more warnings!

The issue still occurs on version 4.2.4. I don't see any circular messages, but I have another issue

  SyntaxError: Unexpected token 'const'
  at webpack:///~/@angular/compiler/@angular/compiler.js:23:0 <- test.bundle.js:105358

and solution

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

removes that circular messages but doesn't fix the error above.

@MohsenBzm But it breaks lazy loading :(
Can't figure how to fix it...

shouldn't it be /@angular(\/|\\)core/ instead of /angular(\\|\/)core(\\|\/)@angular/

as the error message is

WARNING in /server/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
46:15-36 Critical dependency: the request of a dependency is an expression

WARNING in /server/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js
58:15-102 Critical dependency: the request of a dependency is an expression

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

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

This seems to fix it:

    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      path.resolve(__dirname, '../src')
    ),

Do we know what is an actual problem in angular?
When will this be fixed in angular?

@hheexx it won't break lazy loading with angular-router-loader or ngtools/webpack in case of AoT compilation.

@SpaiR breaks it for me. (ngtools)
https://github.com/angular/angular-cli/issues/4431

@hheexx
Oh... yeah. Sorry for disorient. I meant, that if you using ngtools for compilation there is no point of having this workaround at all. Tool deals with dependencies in its own way, so no warning message appears. Cause AoT usually means production-only usage you can just have two config files. One with this tweak for JIT compilation in dev and another with ngtools without it.

@hheexx
I confirm what @SpaiR said is correct. ContextReplacementPlugin is not needed for AOT compilation, so I moved it from webpack.common.js to webpack.dev.js and now both dev and prod (with AOT) builds work like a charm.

Hello,

it seems that this issue is kind of back in angular 5.0.0-beta.6. I was using the 5.0.0-beta.5 until yesterday and had no issue. After I upgraded, despite the fact that I have the following line in my webpack configuration file:

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

I having the following warnings:

WARNING in C:/.../node_modules/@angular/core/esm5/index.js
5697:15-36 Critical dependency: the request of a dependency is an expression
WARNING in C:/.../node_modules/@angular/core/esm5/index.js
5713:15-102 Critical dependency: the request of a dependency is an expression

However, as when I check in the node_modules folder, the content of angular is in a folder called @angular (and not angular), I replaced the line by

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

And the problem seems to be gone. Maybe it could help someone. Note that as I don't even understand what's the issue, my solution could not be correct.

ok, this should work for all versions of Angular and build module systems in webpack

// helpers
const path = require('path')
function root(__path) {
  return path.join(__dirname, __path);
}
// ...
      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 
      ),
// ...

or

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

The issue is that webpack, by default, is trying to resolve dynamic imports and Angular is including System.import for a dynamic import of routes. The way that Angular is handling dynamic routes requires SystemJS to work seamlessly. If you're using Webpack then the build tool will read all files for System.import then try to resolve the route (for easy code splitting). Webpack does this in order to create a map of paths to lazy loaded files that it generates. You don't need SystemJS to have lazy-routes and Angular included System.import to make it easier but you can simply use "loadChildren" syntax (with a function in the router now). The problem is JIT/AoT paths when going with "loadChildren".

• ContextReplacementPlugin docs
• RegExp for paths

I am trying to set up the Webpack to work for the hybrid Angular app, where you have both frameworks running and use "ng-upgrade" module to support upgrade from AngularJS to the latest Angular.

When webpack bundles all the files and I try to run the website I got the same error that was seen in earlier posts:

Cannot assign to read only property 'exports' of object

When I investigate the console errors I can see the following line has been added at the end of "core.es5.js" by the webpack:

//# sourceMappingURL=core.es5.js.map
/*** EXPORTS FROM exports-loader ***/
module.exports = window.angular;

The module.exports = window.angular generates the error.

I am using the webpack "exports-loader" to shim AngularJS so it is available globally on window object:

module: {
        rules: [
            { test: /angular/, use: ['exports-loader?window.angular'] },

I am also using the suggested plugin in my webpack configuration:

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

I do not really understand why webpack modified the "core.es5.js" file and decided to add the "module.export"? Can someone provide me any feedback or suggestions?

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 https://github.com/gdi2290/angular-starter/issues/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
           */
        }

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

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

Thank you @gdi2290 that help me to solve this problem

@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

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

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

What is the problem?

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

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

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

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.