Angular 4 到 5 更新 ./node_modules/@angular/core/esm5/core.js 中的警告答案

【问题标题】：Angular 4 to 5 update WARNING in ./node_modules/@angular/core/esm5/core.jsAngular 4 到 5 更新 ./node_modules/@angular/core/esm5/core.js 中的警告
【发布时间】：2018-07-21 06:39:00
【问题描述】：

我已根据tutorial 将 Angular 4 更新为 5，此后我在 webpack 上的构建失败并出现两个警告：

  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

我经历了这个topic，但没有任何帮助（也许我错过了什么）。这就是我的 webpack.config.vendor.js 插件的外观：

    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
    ]

我最初使用来自 Visual Studio 的 .NET Core API 的 Angular 模板。

【问题讨论】：

您是否运行webpack --config webpack.config.vendor.js 以查看是否清除了警告？过去，当使用您使用的模板从 ng4 迁移到 ng5 时，这对我有用。
你说得对！您可以发表评论作为答案吗？所以我可以接受你的回答。谢谢。
完成！很高兴这有帮助。
是的，这是一个棘手的问题。这通常发生在第一次构建时，但如果供应商文件已经存在 VS2017 模板不会重新创建它（检查您的 *.csproj 文件，构建命令在那里）。还删除 dist 文件夹（在 wwwroot 和项目文件夹中也有帮助，因为它会在您构建 asp.net 核心项目时触发它再次构建

标签： angular webpack asp.net-core

【解决方案1】：

当您使用现在随 VS 2017 提供的较新的 Angular 模板并将 Angular 版本 4 升级到 5.xx 时，您需要运行以下命令以避免在编译时收到一些警告。

webpack --config webpack.config.vendor.js

在项目的根目录下从命令提示符运行此命令会删除您在上面的 OP 中看到的警告。

这样做是重建 wwwroot/dist 文件夹中的 vendor.js 文件，以根据您安装的 Angular（和其他）npm 包对其进行更新。

【讨论】：

删除 dist 文件夹也有帮助，因为 dist 文件夹的存在（在项目中而不是 wwwroot 内）是 csproj 文件中的条件
我现在明白了。 ClientApp/dist 文件夹中的 vendor.js 文件也已更新。感谢您提供信息。
Client/App/dist 中的 vendor.js 由上述命令创建，用于客户端捆绑 (webpack.config.js)

【解决方案2】：

您在 webpack 文件的 ContextReplacementPlugin 中传递的表达式可能存在问题。

我改了

来自

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

到

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

这对我有用。希望它有所帮助:)

【讨论】：