Angular 4 to 5 update WARNING in ./node_modules/@angular/core/esm5/core.js

Question

I have updated Angular 4 to 5 according to this tutorial, after this my build failed on webpack with two warnings:

  WARNING in ./node_modules/@angular/core/esm5/core.js
      6553:15-36 Critical dependency: the request of a dependency is an expression
       @ ./node_modules/@angular/core/esm5/core.js
       @ ./ClientApp/boot.browser.ts
       @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

  WARNING in ./node_modules/@angular/core/esm5/core.js
  6573:15-102 Critical dependency: the request of a dependency is an expression
   @ ./node_modules/@angular/core/esm5/core.js
   @ ./ClientApp/boot.browser.ts
   @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

I went through this topic, but nothing helps (maybe I miss something). This is how my webpack.config.vendor.js plugins look:

    plugins: [
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: 'popper.js' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
        new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
    ] 

I originally use Angular template with .NET Core API from Visual Studio.

Answer 1

When you are using the newer Angular template that now comes with VS 2017, and you upgrade Angular version 4 to 5.x.x, you need to run the following command in order to avoid some warnings you get at compile time.

webpack --config webpack.config.vendor.js

Running this from the command prompt while at the root of the project removes the warnings that you see in the OP above.

What this does is rebuild the vendor.js file in the wwwroot/dist folder to update it based on the Angular (and other) npm packages you have installed.

Answer 2

There can be an issue with the expression you are passing in the ContextReplacementPlugin of webpack file.

I changed it

from

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

to

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

This worked for me. Hope it helped:)