我正在尝试将ngmap注入我的jhipster项目。与
安装依赖后bower安装ngmap --save
它出现在我的bower.json文件中：
{
"version": "0.0.0",
"name": "myApp",
"appPath": "src/main/webapp/",
"testPath": "src/test/javascript/spec",
"dependencies": {
"angular": "1.5.8",
"angular-aria": "1.5.8",
"angular-bootstrap": "1.3.3",
"angular-cache-buster": "0.4.3",
"angular-cookies": "1.5.8",
"angular-dynamic-locale": "0.1.32",
"angular-i18n": "1.5.8",
"ngstorage": "0.3.10",
"angular-loading-bar": "0.9.0",
"angular-resource": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-translate": "2.11.1",
"angular-translate-interpolation-messageformat": "2.11.1",
"angular-translate-loader-partial": "2.11.1",
"angular-translate-storage-cookie": "2.11.1",
"angular-ui-router": "0.3.1",
"bootstrap-sass": "3.3.7",
"bootstrap-ui-datetime-picker": "2.4.3",
"jquery": "3.1.0",
"json3": "3.3.2",
"messageformat": "0.3.1",
"modernizr": "3.3.1",
"ng-file-upload": "12.0.4",
"ngInfiniteScroll": "1.3.0",
"swagger-ui": "2.1.5",
"arrive": "2.3.0",
"bootstrap-material-design": "0.5.10",
"ngmap": "^1.17.8"
},
"devDependencies": {
"angular-mocks": "1.5.8"
},
"overrides": {
"angular": {
"dependencies": {
"jquery": "3.1.0"
}
},
"angular-cache-buster": {
"dependencies": {
"angular": "1.5.8"
}
},
"angular-dynamic-locale": {
"dependencies": {
"angular": "1.5.8"
}
},
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
},
"resolutions": {
"angular": "1.5.8",
"angular-bootstrap": "2.0.0",
"jquery": "3.1.0"
}
}
Gulp在角度依赖之前注入ngmap：
<script src="bower_components/ngmap/build/scripts/ng-map.js"></script>
<script src="bower_components/angular/angular.js"></script>
错误发生了什么：
ng-map.js：34未捕获的TypeError：无法读取属性＆＃39; module＆＃39;未定义的
app.module.js：4未捕获的ReferenceError：未定义角度（...）
我已经在文件末尾手动将js文件注入index.html。它在我的开发环境中本地工作，但在部署到heroku之后，会发生与上面相同的错误。我怎样才能强迫gulp以正确的顺序注入它？
这是我的gulpfile.js：
// Generated on 2016-10-20 using generator-jhipster 3.9.1
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant'),
rename = require('gulp-rename'),
eslint = require('gulp-eslint'),
del = require('del'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if');
var handleErrors = require('./gulp/handle-errors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
copy = require('./gulp/copy'),
inject = require('./gulp/inject'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', ['copy:i18n', 'copy:fonts', 'copy:common']);
gulp.task('copy:i18n', copy.i18n);
gulp.task('copy:languages', copy.languages);
gulp.task('copy:fonts', copy.fonts);
gulp.task('copy:common', copy.common);
gulp.task('copy:swagger', copy.swagger);
gulp.task('copy:images', copy.images);
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function() {
runSequence('inject:dep', 'inject:app');
});
gulp.task('inject:dep', ['inject:test', 'inject:vendor']);
gulp.task('inject:app', inject.app);
gulp.task('inject:vendor', inject.vendor);
gulp.task('inject:test', inject.test);
gulp.task('inject:troubleshoot', inject.troubleshoot);
gulp.task('assets:prod', ['images', 'styles', 'html', 'copy:swagger', 'copy:images'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'myApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
name: 'myApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: true
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
name: 'myApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: false
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['inject:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'pom.xml'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject:app']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['inject:dep', 'ngconstant:dev'], 'sass', 'copy:languages', 'inject:app', 'inject:troubleshoot');
});
gulp.task('serve', ['install'], serve);
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy', 'inject:vendor', 'ngconstant:prod', 'copy:languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
inject.js：
'use strict';
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
inject = require('gulp-inject'),
es = require('event-stream'),
naturalSort = require('gulp-natural-sort'),
angularFilesort = require('gulp-angular-filesort'),
bowerFiles = require('main-bower-files');
var handleErrors = require('./handle-errors');
var config = require('./config');
module.exports = {
app: app,
vendor: vendor,
test: test,
troubleshoot: troubleshoot
}
function app() {
return gulp.src(config.app + 'index.html')
.pipe(inject(gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(naturalSort())
.pipe(angularFilesort()), {relative: true}))
.pipe(gulp.dest(config.app));
}
function vendor() {
var stream = gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles(), {read: false}), {
name: 'bower',
relative: true
}))
.pipe(gulp.dest(config.app));
return es.merge(stream, gulp.src(config.sassVendor)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles({filter:['**/*.{scss,sass}']}), {read: false}), {
name: 'bower',
relative: true
}))
.pipe(gulp.dest(config.scss)));
}
function test() {
return gulp.src(config.test + 'karma.conf.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(inject(gulp.src(bowerFiles({includeDev: true, filter: ['**/*.js']}), {read: false}), {
starttag: '// bower:js',
endtag: '// endbower',
transform: function (filepath) {
return '\'' + filepath.substring(1, filepath.length) + '\',';
}
}))
.pipe(gulp.dest(config.test));
}
function troubleshoot() {
/* this task removes the troubleshooting content from index.html*/
return gulp.src(config.app + 'index.html')
.pipe(plumber({errorHandler: handleErrors}))
/* having empty src as we dont have to read any files*/
.pipe(inject(gulp.src('', {read: false}), {
starttag: '<!-- inject:troubleshoot -->',
removeTags: true,
transform: function () {
return '<!-- Angular views -->';
}
}))
.pipe(gulp.dest(config.app));
}
答案 0 :(得分：17)
你必须在bower.json中的覆盖中添加它：
"overrides": {
"ngmap": {
"dependencies": {
"angular": "1.5.8"
}
}
}
问候！