Question

这是我项目的结构

这是webpack配置

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    webpack = require('webpack');

module.exports = {
    entry: [
        './src/app.js',
    ],
    output: {
        path: __dirname + '/../web/js',
        filename: 'build.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.png$/,
                loader: "url-loader?limit=100000"
            },
            {
                test: /\.jpg$/,
                loader: "file-loader"
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': "jquery"
        }),
        new ExtractTextPlugin('build.css')
    ]
}

这是app.js（webpack的入口点）

import 'babel-polyfill';

import $ from 'jquery';
window.$ = $;

import 'jquery-ui-dist/jquery-ui';

import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';

import 'angular';
import 'angular-ui-sortable';

import './styles.css'
import './controller/app.js'

这是控制器/ app.js（角度应用程序）

import './racks.js'
import './deletedRacks.js'
import './switches.js'
import './deletedSwitches.js'

const myApp = angular.module(
    'myApp',
    [
        'RacksListController',
        'DeletedRacksListController',
        'SwitchesListController',
        'DeletedSwitchesListController',
        'ui.sortable'
    ],
    function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }
);

这是控制器（例如使用deletedRacks.js）

(function (window, angular) {
    'use strict';
    angular.module('DeletedRacksListController', []).controller('DeletedRacksListController', [
        '$scope', '$http', function ($scope, $http) {
            $scope.racks = [];

            $scope.init = () => {
                $http({
                    method: 'GET',
                    url: Routing.generate('racks_get_deleted')
                }).then((response) => {
                    $scope.racks = response.data;
                }, (e) => {
                    console.log(e)
                });
            };

            $scope.restore = (rack) => {
                $http.post(Routing.generate('racks_toggle_delete', {id: rack.id, token: rack.token})).then((response) => {
                    rack.delete = false;
                }, (e) => {
                    console.log(e)
                });
            };
        }
    ])
})(window, window.angular);

当我在开发模式下收集项目时 - 一切正常。控制台中不会显示任何错误。如果我在生产模式（npm run build）上收集项目，我在控制台中收到以下错误：

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化myApp模块：

错误：[$ injector：unpr]未知提供者：t

http://errors.angularjs.org/1.6.4/ $注射器/ unpr？P0 =吨

我请求你的帮助。

Answer 1

这是控制器/ app.js（角度应用程序）

()

错误发生在此文件中。 $ interpolateProvider未注入。正确地说：

import './racks.js'
import './deletedRacks.js'
import './switches.js'
import './deletedSwitches.js'

const myApp = angular.module(
    'myApp',
    [
        'RacksListController',
        'DeletedRacksListController',
        'SwitchesListController',
        'DeletedSwitchesListController',
        'ui.sortable'
    ],
    function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }
);

angularJS + webpack - 生产构建不起作用

1 个答案: