webpack.ProvidePlugin 角度答案

【问题标题】：webpack.ProvidePlugin angularwebpack.ProvidePlugin 角度
【发布时间】：2016-12-23 17:18:20
【问题描述】：

我正在尝试使用 Angular NG6 启动器。在其源代码中，import angular from angular 几乎写在每个 js 文件中。所以我试试这个：

 new webpack.ProvidePlugin({
      // $: "jquery",
      // jQuery: "jquery",
      // "window.jQuery": "jquery",
      'angular': 'angular',
    }),

但它不能工作。我不知道为什么，以及如何解决这个问题。

【问题讨论】：

你跑npm install了吗？

标签： angularjs webpack

【解决方案1】：

你需要像这样使用某物： var app = angular.module('RequiredName', ['ui.router','ui.bootstrap']);

并在应用程序文件上使用它并调用您的应用程序模块，就像在您将使用在 app.factory 或 app.controller 的 app.js 文件中实现的任何功能或方法的项目部分中一样，或者...

【讨论】：

【解决方案2】：

这里是屏幕截图中第一条错误消息“angular.module is not a function”的解决方案：Angular 1 在没有 shim 的情况下不能很好地与 webpack 一起工作（参见 https://github.com/webpack/webpack/issues/2049）。试试这个 webpack 加载器配置：

module: {
    loaders: [
        /*
         * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049
         */
        {
            test: require.resolve('angular'),
            loader: 'exports?window.angular'
        },
    ]
},
plugins: [
    new webpack.ProvidePlugin({
        'angular': 'angular',
    }),
],

这应该正确初始化 angular 对象，而不是将其设置为空对象（没有名为 module 的属性）的默认操作。

【讨论】：