我尝试将webpack和yarn与现有的AngularJS应用程序一起使用但我收到此错误
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module datepicker due to:
Error: [$injector:nomod] Module 'datepicker' is not available! You either
misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
我在stackoverfolow中查看了几个类似于我的问题，但是无法修复它。 我能够将所有导入的模块都看到生成的输出文件或生成的vendor.js文件中，但似乎我遗漏了一些东西。 下面是我的package.json文件
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "yarn run build --watch"
},
"repository": {
"type": "git",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"alasql": "^0.4.2",
"angular": "1.5.3",
"angular-animate": "1.5.3",
"angular-aria": "1.5.3",
"angular-cookies": "1.5.3",
"angular-dynamic-locale": "^0.1.32",
"angular-gridster": "^0.13.14",
"angular-growl-v2": "^0.7.5",
"angular-jk-rating-stars": "^1.0.8",
"angular-material": "^1.1.5",
"angular-messages": "1.5.3",
"angular-nvd3": "^1.0.9",
"angular-sanitize": "1.5.3",
"angular-touch": "1.5.3",
"angular-translate": "^2.15.2",
"angular-translate-loader-static-files": "^2.15.2",
"angular-translate-storage-cookie": "^2.15.2",
"angular-translate-storage-local": "^2.15.2",
"angular-ui-bootstrap": "1.2.4",
"angular-ui-grid": "^4.0.7",
"angular-ui-router": "0.2.13",
"angularjs-slider": "^6.4.0",
"bootstrap-duallistbox": "^3.0.6",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"moment": "^2.18.1",
"ng-idle": "^1.3.2",
"ngstorage": "^0.3.11",
"ui-select": "0.19.8",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"extract-text-webpack-plugin": "^3.0.1",
"webpack": "^3.6.0",
"webpack-css-loaders": "^1.0.0",
"webpack-uglify-js-plugin": "^1.1.9"
}
}
这是我的webpack.config.js
const webpack = require('webpack');
const path = require('path');
const webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: [
'./src/main/webapp/app/app.js',
'./src/main/webapp/app/assets/css/appCSS.css',
],
vendor: [
'angular'
, 'angular-animate'
, 'angular-sanitize'
, 'angular-cookies'
, 'angular-touch'
, 'angular-messages'
, 'angular-aria'
, 'angular-ui-router'
, 'angular-dynamic-locale'
, 'angular-ui-bootstrap/src/datepicker'
, 'angular-ui-bootstrap/src/modal'
, 'angular-ui-bootstrap/src/tabs'
, 'angular-ui-bootstrap/src/dropdown'
, 'angular-ui-grid'
, 'angular-nvd3'
, 'angular-gridster'
, 'angular-material'
, 'angularjs-slider'
, 'angular-growl-v2'
, 'angular-translate'
, 'angular-translate-loader-static-files'
, 'angular-translate-storage-cookie'
, 'angular-translate-storage-local'
, 'angular-jk-rating-stars'
, 'ngstorage'
, 'ui-select'
, 'ng-idle'
, 'jquery'
, 'jquery-ui'
, 'moment'
, 'underscore'
, 'alasql'
]
},
output: {
path: path.resolve(__dirname, './src/main/webapp/app/output'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
/*options: {
presets: ['env']
}*/
}
}, {
test: /\.(jpe?g|png|gif)$/i, //to support eg. background-image property
loader: "file-loader",
query: {
name: '[name].[ext]',
outputPath: 'images/'
//the images will be emmited to public/assets/images/ folder
//the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png);
}
}, {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, //to support @font-face rule
loader: "url-loader",
query: {
limit: '10000',
name: '[name].[ext]',
outputPath: 'fonts/'
//the fonts will be emmited to public/assets/fonts/ folder
//the fonts will be put in the DOM <style> tag as eg. @font-face{ src:url(assets/fonts/font.ttf); }
}
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
node: {
fs: "empty"
},
plugins: [
new ExtractTextPlugin("styles.css"),
new webpackUglifyJsPlugin({
cacheFolder: path.resolve(__dirname, 'public/cached_uglify/'),
debug: true,
minimize: true,
sourceMap: false,
output: {
comments: false
},
compressor: {
warnings: false
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: Infinity
})
]
};
这是我的app模块
import angular from 'angular';
import uirouter from 'angular-ui-router';
//this will only import needed model from bootstrap
import datepicker from 'angular-ui-bootstrap/src/datepicker/datepicker.js';
import modal from 'angular-ui-bootstrap/src/modal';
import tabs from 'angular-ui-bootstrap/src/tabs';
import dropdown from 'angular-ui-bootstrap/src/dropdown';
import ngIdle from 'ng-idle';
import ngAnimate from 'angular-animate';
import ngSanitize from 'angular-sanitize';
import ngCookies from 'angular-cookies';
import 'angular-translate';
import 'angular-dynamic-locale';
import 'angular-growl-v2';
import appDirective from './directives/appDirective.js';
import appConfig from './config/appConfig.js';
import appRun from './run/appRun.js';
import appController from './controllers/appController.js';
angular.module("app",
[ 'ui.router'
, 'datepicker'
, 'modal'
, 'tabs'
, 'dropdown'
, 'ngIdle'
, 'ngAnimate'
, 'ngSanitize'
, 'ngCookies'
, 'pascalprecht.translate'
, 'tmh.dynamicLocale'
, 'angular-growl'
])
.directive(appDirective)
.config(appConfig)
.run(appRun)
.controller(appController);
答案 0 :(得分：0)
我认为这条道路应该以这种方式写成
import datepicker from 'angular-ui-bootstrap/src/datepicker/datepicker.js';
import datepicker from 'angular-ui-bootstrap/src/datepicker';
答案 1 :(得分：0)
你只需删除ui-bootstrap example
中提到的模块名称周围的''import accordion from 'angular-ui-bootstrap/src/accordion';
import datepicker from 'angular-ui-bootstrap/src/datepicker';
angular.module('myModule', [accordion, datepicker]);
或在您的模块中将其导入为'ui.bootstrap.datepicker'