当 BundleTable.EnableOptimizations = true 时，AngularJS angular-ui-router.min.js 会破坏应用程序答案

【问题标题】：AngularJS angular-ui-router.min.js breaks app when BundleTable.EnableOptimizations = true当 BundleTable.EnableOptimizations = true 时，AngularJS angular-ui-router.min.js 会破坏应用程序
【发布时间】：2019-02-06 14:30:06
【问题描述】：

我在 AngularJS 1.7.5 中有一个非常简单的项目（并尝试了 6）。

我正在使用 system.web.optimization 进行捆绑。

在关闭优化的情况下运行项目时，它可以正常工作。

当我打开优化时，我可能会收到来自注入/缩小的错误：

错误：$injector:modulerr 模块错误

我已经从项目中删除了 virtuall 的所有内容，当我在 angular.js 中对错误设置断点时，我看到的最后一次注入发生在我得到错误之前是 ngRoute。

我尝试了多个版本，包括已经缩小的版本。

我在项目中看到的所有需要它的东西上都使用了 $inject。

我在旧版本的 Angular 中多次使用过这个项目。（pre 1.5）并且它已经工作了。

我已经逐步完成了错误处理，它似乎总是在 ngRoute 或 ui-router 上中断。即使包含缩小版本。

当我删除脚本时，我得到了不同的错误（显然）不包括模块。

这个项目非常简单，我无法想象我遇到了 /pages/home javascript 的问题。

在本地运行或发布时，打开优化时我会遇到同样的错误，所以我相当肯定这是一个缩小问题，我终生无法弄清楚它为什么会发生。

'use strict';

angular
.module("rpApp", ['ngRoute', 'ui.router'])

.config(function ($routeProvider, $urlRouterProvider,  $locationProvider) 
{
    $locationProvider.hashPrefix('');
    $urlRouterProvider
        .otherwise('/home');

    $locationProvider.html5Mode(true);
})
.run(['$http', function ($http) {
}]);

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            Home Page Using Bootstrap
        </div>
    </div> 
</div>

(function () {
  angular
    .module("rpApp")
    .controller('homeController', homeController);
     homeController.$inject = [];

  function homeController() {
    var vm = this;
  }
})();

(function () {
  'use strict';
  angular.module("rpApp")
    .directive('home', homeDirective);
    homeDirective.$inject = [];

  function homeDirective() {
    return {
        restrict: 'EA',
        replace: true,
        scope: {},
        require: '?ngModel',
        controller: 'homeController',
        controllerAs: 'homeVm',
        templateUrl: "App/pages/home/home.html",
        link: function (scope, elm, atts, c) {
            //dom manipulation goes in the link function
        }
    };
  };
})();

(function () {
  'use strict';
  angular
    .module('rpApp')
    .config(configRouteHome);

  configRouteHome.$inject = [
    '$routeProvider',
    '$locationProvider'
  ];

  function configRouteHome($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            template: '<div data-home></div>'              
        })
        .when('/home', {
            template: '<div data-home></div>'              
        });
    $locationProvider.html5Mode(true);
  }
})();

<script src="Scripts/jquery-1.10.2.js"></script>   
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"> 
</script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui- router.min.js"></script>
<script src="Scripts/ngRoute.min.js"></script>

<%: System.Web.Optimization.Scripts.Render("~/Bundles/angular") %>
<base href="/">
  </head>

<body>
  <div>
    <div ng-view ng-cloak></div>
  </div>
</body>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.UI;

namespace Angular1._7
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new 
ScriptBundle("~/Bundles/angular").IncludeDirectory("~/app", "*.js", 
true));
            bundles.Add(new 
StyleBundle("~/Bundles/css").IncludeDirectory("~/app", "*.css", true));

            BundleTable.EnableOptimizations = true;
        }
    }
}

我希望项目能够通过添加这些最少的组件来捆绑和缩小。 (ui-router 和 ng-route) 但它似乎永远不会到达 /app

【问题讨论】：

Nat Wallbank 是对的。我错过了配置部分。我从另一个项目中复制了一个以添加漂亮的 url。非常感谢。

标签： angularjs minify angularjs-ng-route system.web.optimization

【解决方案1】：

看起来您的配置函数参数仍会被缩小？

您需要使用数组注入语法（就像您对 run 方法所做的那样）或使用 $inject。

【讨论】：

你是对的。我在配置部分错过了它。感谢您的宝贵时间。