问题描述
我正在使用Bower和Gulp初始化的AngularJS项目。我想用bower install froala-wysiwyg-editor --save添加Froala-Wysiwyg-Editor包，但是当我用gulp运行项目时，页面空白，显示当前错误：Uncaught Error: [$injector:modulerr]
.bowerrc中的目录路径为："directory": "public/js/libs"
这是gulpfile.js：
var gulp = require('gulp'),bower = require('gulp-bower'),sass = require('gulp-sass'),minifyCss = require('gulp-minify-css'),jsonminify = require('gulp-jsonminify'),uglify = require('gulp-uglify-es').default,autoprefixer = require('gulp-autoprefixer'),jshint = require("gulp-jshint"),ngAnnotate = require('gulp-ng-annotate'),rename = require('gulp-rename'),htmlmin = require('gulp-htmlmin'),requirejsOptimize = require('gulp-requirejs-optimize'),sassFiles = ['src/sass/**/*.scss'],jsonFiles = ['src/resources/*.json'],jsFiles = [
"src/bootstrap.js","src/app/**/*.js"
],requireJsFiles = [
"src/app/app.js",htmlFiles = ['src/index.html','src/app/**/partials/*.html'];
/**
* Task used to generate css files from sass files
*/
gulp.task('css',function () {
return gulp.src(sassFiles)
.pipe(sass())
.pipe(autoprefixer({
browsers: ['> 1%','IE 8'],cascade: false
}))
.pipe(minifyCss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest('public/css/'));
});
/**
* Task used to build js files
*/
gulp.task('js',function () {
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter())
.pipe(ngAnnotate({
remove: true,add: true,single_quotes: true
}))
.pipe(uglify({
mangle: true
}))
.pipe(gulp.dest('public/js/app/'));
});
/**
* Task used to build html templates
*/
gulp.task('html',function () {
return gulp.src(htmlFiles)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(rename(function (path) {
if (path.dirname !== '.') {
path.dirname = 'tpl/' + path.dirname.split('/')[0];
}
}))
.pipe(gulp.dest('public/'));
});
/**
* Task used to process json resources files
*/
gulp.task('json',function () {
return gulp.src(jsonFiles)
.pipe(jsonminify())
.pipe(gulp.dest('public/resources/'));
});
/**
* Task used to install bower packages
*/
gulp.task('bower',function () {
return bower({
cmd: 'update',interactive: true
});
});
gulp.task('require',function () {
return gulp.src(requireJsFiles)
.pipe(requirejsOptimize({
mainConfigFile: './src/bootstrap.js',baseUrl: './src/app',name: 'app/app',out: 'app.min.js',removeCombined: false,findnestedDependencies: true,optimize: 'none' // uglify / uglify2 / closure / none
}))
.pipe(gulp.dest('public/js/prod/'));
});
/**
* Task used to watch some changes (css,js,html)
*/
gulp.task('watch',function () {
gulp.watch(sassFiles,['css']);
gulp.watch(jsFiles,['js']);
gulp.watch(jsonFiles,['json']);
gulp.watch(htmlFiles,['html']);
});
gulp.task('install',['css','js','json','html','bower']);
gulp.task('default',['install','watch']);
bootstrap.js：
require.config({
useMinified: true,waitSeconds: 0,paths: {
'ng': '../libs/angular/angular.min','app': '../app','ngAnimate': '../libs/angular-animate/angular-animate.min','ngAria': '../libs/angular-aria/angular-aria.min','ngMaterial': '../libs/angular-material/angular-material.min','ngMaterialDataTable': '../libs/angular-material-data-table/dist/md-data-table.min','ngMessages': '../libs/angular-messages/angular-messages.min','ngResource': '../libs/angular-resource/angular-resource.min','ui.router': '../libs/angular-ui-router/release/angular-ui-router.min','angularFileUpload': '../libs/angular-file-upload/dist/angular-file-upload.min','moment': '../libs/moment/min/moment-with-locales.min','Chart': '../libs/chart.js/dist/Chart.bundle.min','rangy-core': '../libs/rangy/rangy-core.min','rangy-selectionsave': '../libs/rangy/rangy-selectionsaverestore.min','textAngular-sanitize': '../libs/textAngular/dist/textAngular-sanitize.min','textAngularsetup': '../libs/textAngular/dist/textAngularsetup','textAngular': '../libs/textAngular/dist/textAngular','angular-uuid4': '../libs/angular-uuid4/angular-uuid4.min','froala-wysiwyg-editor': '../libs/froala-wysiwyg-editor/js/froala_editor.min'
},shim: {
'ng': {exports: 'angular'},'app': {deps: 'ng'},'ngAnimate': {deps: ['ng']},'ngAria': {deps: ['ng']},'ngMaterial': {deps: ['ng','ngAnimate','ngAria','ngMessages']},'ngMaterialDataTable': {deps: ['ng','ngMaterial']},'angularFileUpload': {deps: ['ng']},'ngMessages': {deps: ['ng']},'ngResource': {deps: ['ng']},'ui.router': {deps: ['ng']},'ui.sortable': {deps: ['ng']},'angular-uuid4': {deps: ['ng']},'textAngular': {deps: ['ng','textAngular-sanitize','textAngularsetup']},'textAngular-sanitize': {deps: ['ng']},'textAngularsetup': {deps: ['ng']},'rangy-selectionsave': {deps: ['rangy-core']},'moment': {exports: 'moment'},'Chart': {exports: 'Chart',deps: ['moment']},'froala-wysiwyg-editor': {deps: ['ng']}
}
});
require(['ng','rangy-core','rangy-selectionsave','app/app'],function (angular,rangyCore) {
window.rangy = rangyCore;
angular.bootstrap(document,['Admin']);
});
还有app.js：
define([
'moment','ng','ngMaterial','ngMaterialDataTable','ngMessages','ngResource','ui.router','angularFileUpload','Chart','textAngular','angular-uuid4','froala-wysiwyg-editor','app/core/module'
],function (moment,angular) {
/**
* Create main module application
* @type {angular.Module}
*/
var module = angular.module('Admin',[
'ngAnimate','md.data.table','uuid4','froala','Admin.Core'
]);
/**
* Define main module config
*/
module.config([
function () {
moment.locale('fr');
}
]);
return module;
});
您可以看到我在每个文件中都添加了Froala编辑器，我不知道我错过了什么。我发现了类似的问题，也许我写错了软件包名称，但是我不知道在哪里可以找到它： How to inject external modules to an AngularJS single page application without injector/modulerr?
这是安装AngularJS软件包的文档：https://froala.com/wysiwyg-editor/docs/framework-plugins/angular1/
谁能看到问题出在哪里？谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）