App doesn't work in production mode

help
1

I build an app with angular which works great as long I am in the debug mode. When I switched to production by adding --production I got nothing but an white screen.
No error messages will be shown.

I entered the URL for the home screen and put some debug output into the required user method. It seems it is never called.

.state('home', {
    url: '/home?',
    templateUrl: 'client/templates/home.ng.html',
    controller: "HomeCtrl",
    resolve: requireUser
})

How could minifiying the code break the complete app?

2

I remember having problems with Angular in Meteor when I had files ending with .ng.html. With angular-meteor you don’t have to append .ng to the templates, and for me it was actually breaking something (I think the implicit annotation syntax for dependency injection was the culprit). So maybe try both to change the filename and the templateUrl in your routing code to see if that helps?

3

Thanks for your answer. I renamed the files and the router entry but it didn’t help. I will upload a small sample project tomorrow and open an issue on github.

4

Did you try to change dependency injection syntax to the explicit one? I.e. do this:

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);

instead of

someModule.controller('MyController', function($scope, greeter) {
// ...
});
5

I also changed this. It seems something is wrong in my $stateProvider:

.state('home', {
    url: '/home?',
    templateUrl: 'client/templates/home.ng.html',
    controller: "HomeCtrl",
    resolve:  {
        user: function($auth) {
            return $auth.awaitUser();
        }
    }
})

works fine but it stopped working when I do something like this:

let requireUser = {
    user: function($auth) {
        return $auth.awaitUser();
    }
};
...
resolve:  requireUser

Maybe I shouldn’t to that because I couldn’t know my requireUser is modified. But I still don’t understand why this works as long as the code isn’t minified.

6

I’m not an Angular expert, but I believe you should create a factory/service for that requireUser method, and not store it in a variable. While storing it in variable “works”, it may have unexpected consequences as you saw. I would probably do it like this:

angular.module('yourapp').factory('user', ['$auth', function($auth) {
  return {
    waitForAuth: function() {
        return $auth.awaitUser();
    }
  }
}]);

// --------

// ... inject "user" factory in your parent function
.state('home', {
    url: '/home?',
    templateUrl: 'client/templates/home.ng.html',
    controller: "HomeCtrl",
    resolve:  user.waitForAuth
})
1 Like
7

I will try it. Thank you!