使用 Gulp 缩小后 ui-router 无法正常工作

Question

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

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

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) {
.....
}]);

Answer 2

您的 .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 执行相同操作。