webpack 包中的角度模块引用导致异常答案

【问题标题】：angular module reference in webpack bundle lead to exceptionwebpack 包中的角度模块引用导致异常
【发布时间】：2017-05-28 18:28:14
【问题描述】：

我正在使用一个简单的 Angular 应用程序测试 Webpack，我通过导入其默认模块来使用 angular-ui-route。
当我捆绑应用程序时，导入的 ui-router 模块的名称与主角度模块中用作参考的名称不匹配。这会导致以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module weather due to:
Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'module' is not a function, got undefined

主模块 (app.ts)

import * as angular from "angular";
import uirouter from "angular-ui-router";

angular.module('weather', [uirouter]);

webpack.config

module.exports = {
entry: "./src/app/app.module.ts",
output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
},

resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
    loaders: [{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }],
    preLoaders: [{ test: /\.js$/, loader: "source-map-loader" }]
  }
};

生成的包（bundle.js）

/***/ function(module, exports, __webpack_require__) {

"use strict";

var angular = __webpack_require__(1);
var angular_ui_router_1 = __webpack_require__(3);

angular.module('weather', [angular_ui_router_1.default]);

引用名称 angular_ui_router_1 .default 与变量 angular_ui_router_1 不匹配。如果我删除“默认”后缀，则 html 页面会毫无例外地加载 Angular。
由于命名不匹配，我可以解决它吗？

【问题讨论】：

你在使用这个插件add-module-exports 吗？
@JAG 不，我目前不使用任何插件。我使用的 webpack.config 与问题中报告的完全相同。
哪个版本的 Webpack？
@zeroflagL 我正在使用 webpack 1.14.0

标签： angularjs webpack angular-ui-router bundle

【解决方案1】：

我可以通过以下方式导入 ui-router 模块来解决此问题：

import 'angular-ui-router';

然后在主模块中注册：

angular.module('weather', ['ui.router'])

【讨论】：