AngularJS angular-ui-router.min.js ломает приложение, когда BundleTable.EnableOptimizations = true

У меня очень простой проект в AngularJS 1.7.5 (пробовал и 6).

Я использую system.web.optimization для сборки.

При запуске проекта с отключенной оптимизацией все работает нормально.

Когда я включаю оптимизацию, я получаю ошибки, предположительно, из-за инъекции/минификации:

Error: $injector:modulerr Module Error

Я удалил практически все из проекта, и когда я ставлю точку останова в angular.js на ошибки, последняя инъекция, которую я вижу, прежде чем я получаю сообщение об ошибке, — это ngRoute.

Я пробовал несколько версий, в том числе уже минимизированные версии.

Я использовал $inject для всего, что видел в своем проекте, где это нужно.

Я использовал этот проект несколько раз в более старых версиях angular. (до 1.5), и это сработало.

Я прошел через обработку ошибок, и кажется, что она всегда ломается на ngRoute или ui-router. Даже при включении уменьшенных версий.

Когда я удаляю скрипты, я получаю разные ошибки (очевидно), что модули не включены.

Этот проект настолько прост, что я не могу себе представить, что у меня проблемы с javascript /pages/home.

При локальном запуске или публикации я получаю ту же ошибку, когда оптимизация включена, поэтому я вполне уверен, что это проблема минимизации. Я просто не могу понять, почему это происходит.

'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

Нат Уоллбэнк был прав. Я пропустил часть конфигурации. Я скопировал один из другого проекта, чтобы добавить красивые URL-адреса. Большое спасибо.

— 06.02.2019 18:14

angularjs minify angularjs-ng-route system.web.optimization

06.02.2019 15:30

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

102

Перейти к ответу Данный вопрос помечен как решенный