angularjs - 在我使用 $uibModal 的 Controller 的 gulp-uglify 和 gulp-concat 之后的 Angular 中断

Question

这是我的 gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var livereload = require('gulp-livereload');
var del = require('del');
var minifyCss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var ngAnnotate = require('gulp-ng-annotate');
var sourcemaps = require('gulp-sourcemaps');

var paths = {
    html: {entry: ['public/angular/entry.html'], partials: ['public/angular/partials/**/*.html'], views: ['public/angular/views/**/*.html']},
    dist: 'public/dist',
    bower_components: ['bower_components/jquery/dist/jquery.min.js', 'bower_components/jquery.cookie/jquery.cookie.js', 'bower_components/bootstrap/dist/js/bootstrap.min.js', 'bower_components/jquery.nicescroll/jquery.nicescroll.min.js','bower_components/jquery-sparkline/dist/jquery.sparkline.min.js', 'bower_components/jquery.easing/jquery.easing.min.js', 'bower_components/bootbox.js/bootbox.js', 'bower_components/retina.js/dist/retina.min.js', 'bower_components/angular/angular.min.js', 'bower_components/angular-sanitize/angular-sanitize.min.js', 'bower_components/angular-touch/angular-touch.min.js', 'bower_components/angular-animate/angular-animate.min.js', 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js', 'bower_components/oclazyload/dist/ocLazyLoad.min.js', 'bower_components/angular-ui-router/release/angular-ui-router.min.js', 'bower_components/angular-ui-router/release/stateEvents.min.js', 'bower_components/angular-loading-bar/build/loading-bar.min.js', 'bower_components/angular-ui-select/dist/select.js', 'bower_components/checklist-model/checklist-model.js'],
    app_scripts: ['public/angular/scripts/app.js', 'public/angular/scripts/**/*.js'],
    app_styles: ['public/angular/styles/reset.css', 'public/angular/styles/layout.css', 'public/angular/styles/components.css', 'public/angular/styles/plugins.css', 'public/angular/styles/themes/green-army.theme.css', 'public/angular/styles/custom.css', 'public/angular/styles/layout/header-loggedin.css', 'public/angular/styles/layout/header-loggedout.css', 'public/angular/styles/pages/sign-in.css', 'public/angular/styles/pages/pos.css', 'public/angular/styles/pages/brand.css', 'public/angular/styles/pages/products.css', 'public/angular/styles/pages/pricing.css', 'public/angular/styles/pages/landing-page.css', 'public/angular/styles/pages/company-profile.css', 'public/angular/styles/invoice-print.css', 'public/angular/styles/angular-custom.css'],
    bower_components_styles: ['bower_components/bootstrap/dist/css/bootstrap.min.css', 'bower_components/font-awesome/css/font-awesome.min.css', 'bower_components/animate.css/animate.min.css', 'bower_components/angular-loading-bar/build/loading-bar.min.css', 'bower_components/angular-ui-select/dist/select.min.css', 'bower_components/angular-ui-select/dist/select.css', 'bower_components/angular-bootstrap/ui-bootstrap-csp.css']
};

gulp.task('clean', function () {
    return del.sync([paths.dist]);
});

gulp.task('html', ['mainHtml', 'partialsHtml', 'viewsHtml'], function() {
    console.log('copying html files started');
});

gulp.task('mainHtml', function() {
    gulp.src(paths.html.entry)
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(rename('index.html'))
        .pipe(gulp.dest(paths.dist));
});

gulp.task('partialsHtml', function() {
    gulp.src(paths.html.partials)
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(paths.dist + '/partials'));
});

gulp.task('viewsHtml', function() {
    gulp.src(paths.html.views)
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(paths.dist + '/views'));
});

gulp.task('styles', ['bower-styles', 'app-styles'], function(){
    console.log('starting styles task');
})

gulp.task('bower-styles', function(){
    return gulp.src(paths.bower_components_styles)
        .pipe(autoprefixer())
        .pipe(concat('bower_styles.css'))
        .pipe(minifyCss())
        .pipe(gulp.dest(paths.dist))
})

gulp.task('fonts', function() {
    return gulp.src(['bower_components/font-awesome/fonts/fontawesome-webfont.*'])
        .pipe(gulp.dest('public/dist/fonts/'));
});

gulp.task('app-styles', function(){
    return gulp.src(paths.app_styles)
        .pipe(autoprefixer())
        .pipe(concat('app_styles.css'))
        .pipe(minifyCss())
        .pipe(gulp.dest(paths.dist))
})

gulp.task('scripts', ['bower_scripts','app_scripts'], function(){
    console.log('starting scripts task');
})

gulp.task('bower_scripts', function(){
    console.log('starting bower scripts task');
    return gulp.src(paths.bower_components)
        .pipe(sourcemaps.init())
        .pipe(ngAnnotate())
        .pipe(uglify({mangle:false}))
        .pipe(concat('bower_scripts.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dist))
})

gulp.task('app_scripts', function(){
    console.log('starting app scripts task');
    return gulp.src(paths.app_scripts)
        .pipe(sourcemaps.init())
        .pipe(ngAnnotate())
        .pipe(uglify({mangle:false}))
        .pipe(concat('app_scripts.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dist))
})

gulp.task('default', ['clean', 'html', 'styles', 'fonts', 'scripts'], function(){
    console.log('starting default task');
})

这是为特定 Controller 生成的输出

"use strict";angular.module("sbApp").controller("BrandsCtrl",["$scope","$rootScope","$state","CustomStorage","Brands","$uibModalStack",function($scope,$rootScope,$state,CustomStorage,Brands,$uibModalStack){$scope.vm={brand:{title:"",description:""}},$scope.createBrand=function(){return $scope.vm.errorMsg="",$scope.vm.successMsg="",""==$scope.vm.brand.title||null==$scope.vm.brand.title||void 0==$scope.vm.brand.title||$scope.vm.brand.title.length<3||$scope.vm.brand.title.length>30?$scope.vm.errorMsg="The title must be min 3 max 30 letters":""==$scope.vm.brand.description||null==$scope.vm.brand.description||void 0==$scope.vm.brand.description?$scope.vm.errorMsg="Description is required":$scope.vm.brand.description.length<3||$scope.vm.brand.description.length>1e3?$scope.vm.errorMsg="Description must be min 3 max 1000 letters.":($scope.displaySpinner=!0,void Brands.addNew($scope.vm.brand).then(function(response){$scope.vm.brand.title="",$scope.vm.brand.description="",$scope.vm.successMsg=response.data.title+" added successfully."},function(err){$scope.vm.errorMsg=err.data.message?err.data.message:err.data.msg})["finally"](function(){$scope.displaySpinner=!1}))},$scope.disposeModal=function(){$uibModalStack.dismissAll()}}]);

ui.bootstrap 模块，angular.min.js:123

出现错误

错误:

[$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24uibModalStackProvider%20%3C-%20%24uibModalStack%20%3C-%20InvoiceCtrl%20%3C-%20BrandsCtrl

我已经在 mu gulpfile.js 中使用了 gulp-ng-annotate,.pipe(uglify({mangle:false}))。请指出它在哪里破坏了我的 $uibModal 应用程序，为什么？

Angular 版本 - AngularJS v1.6.4节点

Answer 1

看来你应该添加对 ui.bootstrap 模块的依赖:

angular.module("sbApp", ["ui.bootstrap"])...