如何使用 webpack 4.* 加载 angularjs 1.* ngRoute?
How can I load angularjs 1.* ngRoute with webpack 4.*?
我正在尝试建立一个基本的 angularjs + webpack 项目。只要我坚持单独使用 angularjs (ngApp = angular.module('ngApp), [])
,我就可以很好地 运行ning。每当我尝试采取措施添加一些 angular 扩展名 (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
如果你看到像 '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"
我正在尝试建立一个基本的 angularjs + webpack 项目。只要我坚持单独使用 angularjs (ngApp = angular.module('ngApp), [])
,我就可以很好地 运行ning。每当我尝试采取措施添加一些 angular 扩展名 (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
如果你看到像 '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"