时间戳

首页 > 解决方案 > 如何使用 webpack 4.* 加载 angularjs 1.* ngRoute？

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

问题描述

我正在尝试建立一个基本的 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];

网络控制台错误：

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

标签： angularjswebpackangular-routingwebpack-4

解决方案

如果你看到像 'Unknown provider' 这样的错误，带有像 '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"

推荐阅读