angularJS + webpack - production build not work - angularjs

Question

This is the structure of my project
This is the webpack configuration
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')
]
}
This is app.js (entry point for 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'
This is controller/app.js (angular app)
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(']]');
}
);
This is controller (for example use 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);
When I collect the project on the dev mode - everything works well. No errors appear in the console. If I collect the project on the the production mode (npm run build) I get the following error in the console:
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
I ask for your help.

Answer 1

This is controller/app.js (angular app)
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(']]');
}
);
The error is in this file. $interpolateProvider is not injected. Correctly so:
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(']]');
}]);