jhipsterプロジェクトに正しい順序でバワー依存関係を注入する方法

Question

私はjhipsterプロジェクトにngmapを注入しようとしています。

bower install 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" 
    } 
} 

ガルプは角度依存性BEFORE ngmap注入：

ng-map.js:34 Uncaught TypeError: Cannot read property 'module' of undefined

app.module.js:4 Uncaught ReferenceError: angular is not defined(…)

：エラーで発生したものを

<script src="bower_components/ngmap/build/scripts/ng-map.js"></script> 
<script src="bower_components/angular/angular.js"></script> 

ファイルの最後にjsファイルを手動でindex.htmlに挿入しました。私の開発環境ではローカルで動作しますが、herokuにデプロイした後、上記と同じエラーが発生します。どのようにしてガルプに正しい順序で注入させることができますか？

それは私の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：あなたはbower.jsonに上書きでこれを追加する必要があり

'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)); 
} 

Answer 1

：

"overrides": { 
    "ngmap": { 
     "dependencies": { 
     "angular": "1.5.8" 
     } 
    } 
} 

よろしく！