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

Question

我正在尝试建立一个基本的 angularjs + webpack 项目。只要我坚持单独使用 angularjs (ngApp = angular.module('ngApp), [])) 就可以让它运行良好。每当我尝试采取步骤添加一些 Angular 扩展(ngApp = angular.module('ngApp), ['ngRoute'])时，有些东西就不起作用。我相当确定问题出在库的加载上。我不想使用 Bower，我想使用 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 知道要注入(inject)哪个依赖项。

在 Angular 文件中进行任何依赖项注入(inject)后，在下一行添加“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 的 devDependency

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