减少AngularJS应用程序问题

Question

I have an application written in AngularJS and Bootstrap that works perfectly well, but when I tried to minify it I got problems. 我有一个用AngularJS和Bootstrap编写的应用程序，可以很好地运行，但是当我尝试使其最小化时，我遇到了问题。

The index.html of my app is: 我的应用程序的index.html是：

<!DOCTYPE html>
<html lang="es-ES"  >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vebor Editor</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="css/style.min.css">

</head>
    <body ng-app="editor"  ng-strict-di>
        <header ng-include="'views/header.html'"></header>
        <div class="container">
            <div ui-view></div>
        </div>
        <footer class="footer" ng-include="'views/footer.html'"></footer>
<script src="/lib/angular/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
        <script src="https://cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
        <script src="/js/scripts.min.js"></script>
    </body>
</html>

I have 14 different js files so I won`t copy them here, if there is anything you need let me know. 我有14个不同的js文件，所以我不会在这里复制它们，如果您需要任何内容，请告诉我。 The main js file is something like this: js主文件是这样的：

(function(){

    'use strict';
    angular.module('editor', [
        'ngMaterial', 'ngRoute',  'ngSanitize', 'ui.bootstrap', 'ui.router',
        'editor.mainControllers', 'editor.searchControllers', 'editor.classControllers', 'editor.contactController', 'editor.viewerController', 'editor.listingControllers',
        'editor.services', 'editor.serverCallsServices', 'editor.translationService'
    ]);
function config (...){...}
function run(...){...}
})();

First, I used the function uglify in gulp in order to generate the distribution project with style.min.css and script.min.js. 首先，我在gulp中使用了uglify函数，以使用style.min.css和script.min.js生成发行项目。

Second, I manually copy the whole content of my js files into one unique script.js and then I minified it using external tools. 其次，我将js文件的全部内容手动复制到一个唯一的script.js中，然后使用外部工具将其最小化。 (The problems I got happended even with the unified file without being minified). （即使没有统一文件，我遇到的问题也是如此）。

Problem 问题

The problem is simple to explain. 这个问题很容易解释。 The page is not loaded, it seems like an infinite loop because the console shows nothing and there is no DOM. 该页面未加载，这似乎是一个无限循环，因为控制台什么也不显示，也没有DOM。 If I reload the page it's still not working, I have to close the tab and open it again. 如果我重新加载页面仍无法正常工作，则必须关闭该选项卡，然后再次打开它。

Due to the fact that there is no information from the brower, I'm very lost. 由于没有来自浏览器的信息，我很失落。 Do you know why this might be happending? 你知道为什么会这样吗？ Or maybe there is something that I could use to try to discover the problem? 也许有一些我可以用来发现问题的东西？

I've already know about the injection problem in Angular and I have all my controllers with the proper $inject. 我已经知道了Angular中的注入问题，并且我所有的控制器都带有正确的$ inject。

Answer 1

If I was you I would try to load the files in different order. 如果我是你，我会尝试以不同的顺序加载文件。

This answer could helps you. 这个答案可以帮助您。

减少AngularJS应用程序问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-06-13 15:10:42

减少AngularJS应用程序问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-06-13 15:10:42

解决方案1
1 已采纳 2017-06-13 15:10:42