Gulp 使用 requirejs 缩小 Angular 应用程序文件的问题答案

【问题标题】：Gulp Minify issues with angular app files using requirejsGulp 使用 requirejs 缩小 Angular 应用程序文件的问题
【发布时间】：2017-08-28 11:17:55
【问题描述】：

我们使用 Requirejs 作为 Angular 应用程序的模块加载器，并尝试使用 gulp 作为构建工具。缩小所有应用程序文件（因为是相同的文件夹结构）并用于发布。在使用缩小版本时出现错误 Unknown provider: e。从app.js 文件引导应用程序时引发错误。（...表示还有更多类似的）

define(['angularAMD', 'jquery', 'angular-ui-router', 'modelBuilderApp', ... ], function (angularAMD, $) {
    'use strict';
    var app = angular.module('app', ['ui.router',
        'modelBuilderApp',....]);
    ... DO configure app ...
    angularAMD.bootstrap(app); //ERROR HERE    
    return app;
});

原版

define(['angularAMD', 'angular-ui-router', 'routeResolver', 'RestService', 'AuthModule', 'smarttable', 'ngScrollable'],
    function (angularAMD) {
        'use strict';
        var app = angular.module('modelBuilderApp', ['ui.router', 'ngScrollable']);
        app.config(function ($locationProvider, $stateProvider, $urlRouterProvider, routeResolverProvider) {
            var route = routeResolverProvider.route;

            $stateProvider
                .state('model', angularAMD.route({...

缩小版

define(["angularAMD", "angular-ui-router", "routeResolver", "RestService", "AuthModule", "smarttable", "ngScrollable"],
function (angularAMD) {
    "use strict";
    var e = angular.module("modelBuilderApp", ["ui.router", "ngScrollable"]);
    return e.config(function (e, l, r, t) { //ERROR HERE
        var o = t.route;
        l.state("model", angularAMD.route({....

我是否遗漏了什么，这是缩小 requirejs 文件的正确程序吗？我是否需要研究任何其他优化技术？

【问题讨论】：

标签： javascript angularjs gulp requirejs gulp-uglify

【解决方案1】：

问题不在于缩小。你需要在 Angular 应用中使用dependency injection

app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', 'routeResolverProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, routeResolverProvider) {
    //Your code
}]);

不过，为了更快的开发，你可以使用gulp-ng-annotate

【讨论】：

gulp-ng-annotate 确实帮了我很多感谢您的推荐。