我如何用webpack 4.*加载angularjs 1.* ngRoute？

Question

我正试图建立一个基本的天使+ webpack项目。只要我坚持单独使用angularjs ( (ngApp = angular.module('ngApp), []))，我就能让它运行得很好。每当我尝试添加一些角度扩展(ngApp = angular.module('ngApp), ['ngRoute'])的步骤时，有些东西就不起作用了。我相当肯定问题是图书馆的装货问题。我不想用保龄球，我想用Webpack来管理它。

webpack.config.js:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Webpack Starter App',
            template: './src/templates/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.js$/,
                use: [
                    'angular-router-loader',
                    'babel-loader'
                ]
                /* These  2 js loaders were failed attempts at solving this problem*/
            }
        ]
   }
};

ngApp.js

import * as angular from 'angular';
import ngRoute from'angular-route';
import './ngApp.controller.root.js';

const ngApp = angular.module('ngApp', [ngRoute]);

ngApp.config(function($routeProvider){
    $routeProvider.when('/', {
        controller: 'ngAppRootController',
        templateUrl: './ngApp.view.root.html'
    }).otherwise({
        redirectTo: '/'
    });
});

ngApp.$inject = [ngRoute];

网页错误：

angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:
Error: [$injector:unpr] Unknown provider: t

Answer 1

如果你看到错误像“未知提供者”这样的随机字母'e'/'t'/'x'，就意味着你需要ngInject插件来让Webpack知道该注入哪个依赖项。

在角文件中的任何依赖项注入后，在下一行中添加“ngInject”：

ngApp.config(function($routeProvider, serviceWhateverYouRequire) {
'ngInject'
$routeProvider.when('/', {  bla-bla-bla

或

ngApp.config(['$routeProvider', 'serviceWhateverYouRequire', function($routeProvider, serviceWhateverYouRequire) {
$routeProvider.when('/', {  bla-bla-bla

我们将这些库用于webpack@4.12.0的devDependencies。

"ng-annotate-loader": "0.1.0",
"ng-annotate-webpack-plugin": "^0.3.0",
"ts-ng-annotate-loader": "^0.2.1"