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

Question

我正在尝试建立一个基本的angularjs + webpack项目。只要我一个人坚持单独使用angularjs (ngApp = angular.module('ngApp), [])，就可以使其运行良好。每当我尝试采取步骤添加一些角度扩展（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];

webconsle错误：

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知道要注入的依赖项。

在Angular文件中进行任何依赖项注入后，在下一行添加'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"