angularJS +的WebPack - 生產版本無法正常工作

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運行版本）的項目，我在控制檯中出現以下錯誤：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:

Error: [$injector:unpr] Unknown provider: t

http://errors.angularjs.org/1.6.4/ $injector/unpr?p0=t

我請求你們的幫助。

Answer 1

這是控制器/ 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(']]'); 
    } 
); 

該錯誤是在該文件中。 $ interpolateProvider沒有被注入。正確如此：

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

const myApp = angular.module(
    'myApp', 
    [ 
     'RacksListController', 
     'DeletedRacksListController', 
     'SwitchesListController', 
     'DeletedSwitchesListController', 
     'ui.sortable' 
    ] 
); 

myApp.config(['$interpolateProvider', function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
}]);