如何在 webpack 中注入 Angular 模块？

Question

我从 npm 安装 ngRoute，我的 webpack 默认加载 default.js

webpack.config.js

'use strict';

var path = require('path'),
    webpack = require("webpack"),
    AngularPlugin = require('angular-webpack-plugin');

module.exports = {
  resolve: {
    root: [path.join(__dirname, "bower_components")]
  },
  plugins: [
  new webpack.ResolverPlugin(
    [new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])],
    ["normal", "loader"]
  ),
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      _: "underscore"
  }),
  new AngularPlugin()
  ],
  entry: {
    all: "./app/assets/javascript/default",
  },
  output: {
    path: __dirname + '/dist/assets/javascript',
    filename: "[name].bundle.js",
    chunkFilename: "[id].bundle.js"
  },
}

default.js

 // default.js
 'use strict';

 require('angular-route');
 require('./angularLoad')();

angularLoad.js

// angularLoad.js
module.exports = function () {
   var app = angular.module('myApp', ['ngRoute']);
   app.controller('ctroe', function(){
     console.log("aaaaaaaaaaaa");
   });
};

当我运行webpack时，得到一个错误信息：

Module not found: Error: Cannot resolve module 'ngRoute' in....

这个错误是在angular注入的时候出现的。有什么建议吗？感谢大家。 :)

Answer 1

您可以像这样设置从 ngRoute 到 angular-route 的别名：

resolve: {
    alias: {
        'ngRoute': 'angular-route'
    }
}

如何在 webpack 中注入 Angular 模块？

How can I injector Angular module in webpack?

commonjs

angularjs

webpack