Структура моего проекта:
Конфигурация webpack (webpack.config.js)
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'
Это корневой файл для angular (controller/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);
Когда производу сборку в dev mode - все работает прекрасно. Нет никаких ошибок в консоле. Когда я собираю проект в production mode (npm run build) - проект так же собирается без ошибок, но в консоле вижу следующее:
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
Надеюсь на вашу помощь.