I have a resolve in my code which works perfectly fine locally and all tests pass as well. However, it seems that the minified code causes some problems here.
When I stage the code and then run it locally it causes the same issues as the minified code. The resolve block does not do its job anymore.
Is there a way to compare the minified code with the actual code to find differences?
.state('index', {
url: '/',
resolve: {
trans: ['resolveService', function(resolveService) {
resolveService.languageResolve('main', {});
}]
},
controller: 'IndexCtrl'
})
.state('main', {
url: '/{language:[a-z]{2}}',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl',
controllerAs: 'mainCtrl',
resolve: {
trans: ['resolveService', '$stateParams', function(resolveService, $stateParams) {
return resolveService.translateResolve($stateParams);
}],
redirect: ['resolveService', function(resolveService) {
return resolveService.resolveRedirect();
}]
}
})
.state('main.results', {
url: '/results/{route:nonURIEncoded}',
templateUrl: 'app/results/results.wrapper.html',
controller: 'ResultsCtrl',
resolve: {
urlParsed: ['urlParser','$stateParams','$state',function(urlParser,$stateParams,$state){
return urlParser.parse($stateParams.route).then(function(){ return true },function(err){
$state.go('main',{
language: $stateParams.language
});
});
}]
},
controllerAs: 'rc'
})
If you are experiencing a different behavior comparing the original and minified code, I'm pretty sure that something went wrong at the minification process and the result is incomplete or wrongly parsed. You should check your browser console and your minifier log for errors.
Also, as already pointed in comments (1, 2), you can pretty print the minified code to manually check where is the difference.
In Chrome:
Pretty Print JavaScript
The DevTools support prettifying of minified JavaScript to a more
readable form. To pretty print:
Go to the Sources panel and selected your desired script from the scripts list.
Next, press the "Pretty print" button (marked with curly braces) from the bottom of the DevTools window.
Your code should now be prettified!
Before
After
Related
Implementing localization in angular app.
In app.js, written below code to support fallback language , if required .json files not present in the specific {{de-DE}}\ folder. (Taken german for example)
function configure($routeProvider, $locationProvider, $translateProvider, $httpProvider, $compileProvider) {
$routeProvider
.when('/instructions', {
templateUrl: "app/instructions/Instructions.html",
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('instructions');
$translatePartialLoader.addPart('common');
//$translatePartialLoader.addPart('instructions').then(function (data) {
//console.log(data);
//});
//$translatePartialLoader.addPart('common').then(function (data) {
// console.log(data);
//});
$translateProvider.fallbackLanguage("en-US");
return $translate.refresh();
}]
}
})
.otherwise(
{
redirectTo: redirectTo
});
$httpProvider.useApplyAsync(true);
//$locationProvider.html5Mode(true);
$translateProvider.preferredLanguage($("#CultureCode").val());
$translateProvider.fallbackLanguage('en-US');
}
After changing my browser setting to german (google chrome). Files were not found, so it had to fallback. With the above code, my fallback language was english. So app downloaded .json files from {{en-US}}\folder.
But the actual problem is.
Once all the code excecutes , in one place i have written.
$rootScope.$broadcast("SHIFT_CHANGED");
And subscribing for the event like below.
$scope.$on("SHIFT_CHANGED", function() {
loadInstructions();
});
Here load instructions in my main method. Which is not getting executed because. Shift_changed events is not getting fired.
For testing purpose as soon as i paste those .json files in german folder. App starts working. But am trying to implement fallback.
I tried few code which is commented for refrence above. addpart trying to resolve for promise.
But none of them worked.
Am i missing some thing. And no error in console.
clueless to figure out.Any ideas to troubleshoot further / Is really some code is missing.
Please help.
Thanks in Advance
I'm using ngRoute in my site, it work well on my computer (local) but on the server routing doesn't work. On my computer all my files are html, on the server i rename them as php. How can i fix it?
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $compileProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.php",
controller: 'oneCtrl'
})
.when("/about", {
templateUrl : "pages/about.php"
})
.when("/news", {
templateUrl : "pages/news.php"
})
});
Based on the error messages you're getting (as you said in the comments), the Angular library is not being loaded. Double-check the URL. Also in the browser dev tools, check the Network tab and see what error it shows. Probably a 404 not found.
After checking your website and the line where you said the error was occurring (line 156 of route.js), change your code to this:
$('.counter-one span').eq(0).html(value1 + ' ');
$('.counter-two span').eq(0).html(value2 + ' ');
You did a search/replace for "html" to "php" but that also replaced the jQuery html() command. Just fix these two lines and you should be good.
I'm having trouble with routing when using some third-party JavaScript files. The routing works fine without the third party JS files, but with them being called the routing breaks, yielding errors such as:
angular.js:13424 Error: [$compile:tpload] Failed to load template: app/views/_header.html (HTTP status: undefined undefined)
...Except app/views/_header.html is the correct path as viewed from index.html. This seems to imply that the root somehow has changed with the third party library, so I'd like visibility as to what it sees as the root of the path when it fails on $compile:tpload.
Is there some way to view this information?
Edit
Folder structure:
Some reference in app.js:
$routeProvider
.when('/Home',
{
templateUrl: '/app/views/home.html',
caseInsensitiveMatch: true
})
.when('/PasswordReset',
{
templateUrl: '/app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
//requireAdLogin: true,
caseInsensitiveMatch: true
})
.when('/UserSearch',
{
templateUrl: '/app/views/userSearch.html',
controller: 'UserSearchController as vm',
//requireAdLogin: true,
caseInsensitiveMatch: true
})
.otherwise({ redirectTo: '/Home' });
Note, this works when not using the third-party JS (Adal.js and Adal-Angular.js).
I am using ui-router, and have a profile state that looks as follows:
.state('profile', {
url: "/profile",
templateUrl: "views/profile.html",
controller: 'ProfileCtrl',
resolve: {
currentUser: function(gamAuth){
return gamAuth.checkCurrentUser(config.userRol.user)
}
}
When I try to reload/refresh the page I get the following message:
Cannot GET /profile
The problem does not occur when I reload my 'landing page' at: http://localhost:9000/, which has the following state in $stateProvider:
.state('home', {
url: "/",
[...]
})
I am using: $locationProvider.html5Mode(true);
I tried providing absolute URL as suggested in the Decision Tree here
I also tried a number of suggestions found online, the most popular being something along these lines (placing it in the app.run() section):
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
All approaches were tested with and without the <base href="/"> tag being present in the <head> of my index.html.
Thank you for your time.
you need to enable html5mode to true if you want to use your url without '#' prefix.
Also you need to add your modRewrtie in as mentioned here
Prerequisite:
npm install --save-dev connect-modrewrite
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
for more details about Rewrites to be setup:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
OK I'm officially bald now, after having been streching my hair out with this infamous problem: The minfied AngularJS app just doesn't work, with this error thown out:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11492
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26946
at Object.c [as get] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:27041
at c (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at Object.d [as invoke] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26496)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:910
at Object.f [as forEach] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11927)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:856
at j (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:5:27235)
Lots of other people had this problem as well, but looks like it could be fixed by declaring dependencies as an array instead of bare function parameters, like this:
angular.module('my-app').controller('LoginCtrl', [ '$scope', 'HttpService', function($scope, HttpService) { ... }]);
instead of this:
angular.module('my-app').controller('LoginCtrl', function($scope, HttpService) { ... });
But it doesn't work in my case. I checked all of my scripts (coffee and generated javascripts as well), they all use the proper array-style declaration.
The problem doesn't come from extra packages apparently. I tried moving all extra package references out of <!-- bower:js --> block (so that they are not minified by grunt), yet the problem still remains. Which means, it's my code to blame... But then again, I've tried the (seems to be) only fix available, to no avail.
Any hint, even on how to properly debug this?
Thanks in advance!
Finally I've found the problem. And yes, it's a DI bug which I missed.
To all who may be suffering from the same headache: array-format declaration must be done in $routeProvider's resolve options as well. In my case (CoffeeScript ahead):
app.config (['$routeProvider', ($routeProvider) ->
$routeProvider
.when '/',
templateUrl: 'views/main.html'
controller: 'MainCtrl'
resolve:
groups: ['GroupService', (GroupService) -> # I MISSED THIS
return GroupService.getAll()
]
entries: ['EntryService', (EntryService) -> # AND THIS
return EntryService.getAll()
]
# ...
])
Hope this helps!
This behaviour could come if you use implicit injection, instead of explicit declaring your dependencies. In my experience I faced this kind of problem with particular kind of Angular.js services that return instantiable class (for example to create abstract controller Classes or some other particular cases).
For example: AbstractBaseControllerClass
During minification I had the same problem. I solved using internal declaration of dependency injection.
Hope this helps
For the ones that doesn't like CoffeeScript.
I just took some of my code and put it in.
$stateProvider
.state('screen', {
url: '/user/',
templateUrl: 'user.html',
controller: 'UserController',
controllerAs: 'user',
location: "User",
resolve: ['$q', 'UserService', '$state', '$timeout', authenticateUser
]
})
function authenticateUser($q, UserService, $state, $timeout) {
UserService.getLoginStatus().then(function () {
if (UserService.user) {
console.log("is user");
return $q.when();
} else {
console.log("not user");
$timeout(function () {
// This code runs after the authentication promise has been rejected.
// Go to the log-in page
$state.go('login')
});
return $q.reject()
}
});
}