ui-路由器在使用 Gulp 缩小后不工作

Question

我使用 Angular 制作应用程序并使用 Gulp 缩小所有文件 css、javascript。但是如果我运行 gulp build 缩小然后运行文件 'index.html' 在 dist 文件夹中，ui-router 不会加载模板。在文件 html 中，像这样标记一个静止图像：<a ui-sref='link'> LINK </a>。你帮我真是太好了！这是 link 代码：

app.js https://gist.github.com/quyen91/d4ca009bb0be0e42a5a9dbded76ec45a

gulpfile.js https://gist.github.com/quyen91/bd04688302847a964e16586f9b468d29

错误：https://cdn.pbrd.co/images/1EjGpl8T.png

Answer 1

您的 .run 和 .config 块不是缩小安全的。

为 .run 尝试这个：

.run(['$rootScope', '$state', 'auth', 'jwtHelper', '$location', 'store', function($rootScope, $state, auth, jwtHelper, $location, store) {


    $rootScope.$on('$locationChangeStart', function() {
    // Get the JWT that is saved in local storage
    // and if it is there, check whether it is expired.
    // If it isn't, set the user's auth state
    var token = store.get('token');
    if (token) {
      if (!jwtHelper.isTokenExpired(token)) {
        if (!auth.isAuthenticated) {
          auth.authenticate(store.get('profile'), token);
        }
      }
    }
    else {
      // Otherwise, redirect to the home route
      $location.path('/about');
    }
  });

}]);

对 config 执行相同的操作。

Answer 2

Ui 路由器和许多工厂通常停止工作，因为当我们不缩小时，我们总是将它们提供者的正确名称注入控制器或配置或运行或任何东西的参数中否则..但是当缩小时，会发生什么

run(function($state,$rootScope,$http){})
would become 
run(function(x,y,z){})

这导致了问题..

所以分开写提供者的名字总是一个好习惯。因此函数变为

run(['$state','$rootScope','$http',function($state,$rootScope,$http){}]);
to 
run(['$state','$rootScope','$http',function(x,y,z){}]);

但这里变量的提供者是正确的，所以不会导致任何错误。

在您的情况下，运行方法应该类似于

.run(['$rootScope', '$state', 'auth', 'jwtHelper', '$location', 'store',function($rootScope, $state, auth, jwtHelper, $location, store) {


    $rootScope.$on('$locationChangeStart', function() {
    // Get the JWT that is saved in local storage
    // and if it is there, check whether it is expired.
    // If it isn't, set the user's auth state
    var token = store.get('token');
    if (token) {
      if (!jwtHelper.isTokenExpired(token)) {
        if (!auth.isAuthenticated) {
          auth.authenticate(store.get('profile'), token);
        }
      }
    }
    else {
      // Otherwise, redirect to the home route
      $location.path('/about');
    }
  });

并且配置应该以

开始

.config(['$stateProvider', '$urlRouterProvider', 'authProvider', '$httpProvider', '$locationProvider',
  'jwtInterceptorProvider',function ($stateProvider, $urlRouterProvider, authProvider, $httpProvider, $locationProvider,
  jwtInterceptorProvider) {
.....
}]);

ui-路由器在使用 Gulp 缩小后不工作

ui-router not working after minify with Gulp

minify

angularjs

angular-ui-router