i have little problem with my code:
https://github.com/burnpiro/angular-blog
live version is available on http://erdem.pl/#/
Problem is that after deploying it on my server routing doesn't work. ui-router not even trying to load template or controller into ui-view. Application starts and configs are fired (tried with console.log). Even resolve option in home state is fired (PostService). But somehow it cannot load template. If i access template manually:
erdem.pl/components/home/home.html
it is there. The same with controller. If anyone have any ideas please let me know. It happened after deploy. Before that on my local machine it seems to work fine but now after getting project again and deploying it on my local it has the same error.
There is no JS errors or any network errors.
Thanks for help,
I'm not completely sure, but I think the issue is with the host you've set in your config.js file? This should be pointed to the public link for wherever your api lives. Should it be "http://erdem.pl"?
I've also noticed that Restangular doesn't seem to be sending your requests. I see that the execution gets into the RequestInterceptor, but I don't see them in the Network tab of my developer tools. This means that your promises from your resolve properties on your states will never be resolved. Your states are configured to wait for these resolve requests to resolve before initializing the controller and loading the template.
EDIT: I think I found the issue!
Looks like Restangular is only compatible with Lodash 3.10, anything after that causes compatibility issues. Downgrade to 3.10 and hopefully it works for you!
Related
I upgraded my large app from 1.4 to 1.6 recently. Ever since the upgraded, some extremely helpful debug/error messages aren't showing.
For example, if I forget an injection, there's no error message, however the app won't load.
If I try to do any large changes, my app won't load because of some angular-centric issue, but I normally won't be able to find the issue since there's no console message.
Edit
I'm also not getting error messages for circular dependencies. The app just won't load in this case, either.
We finally figured this out ourselves. Thought I'd come back and share.
We had to modify a config on the main module. Here's the code example. Give it a try. Unless you figured out something else.
var myApp = angular.module('myApp');
myApp.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(true);
}]);
I am using AngularJS to build a web app. I use ngRoute for routing and templating. I use gulp-serve to start my website locally. Once for few days it suddenly stops working. After I change local port it works ok.
For example: First it worked on port localhost:3000, but stopped and doesn`t work anymore
then the same with ports 3001,3002,3003,3004
Stopped working means it doesnt load template any more. If I try to access template file directly it is ok, but angular isnt loading it. In debug console there are no messages.
Can somebody explain how is it possible.
I guess I am not in a position to give you a 100% perfect explanation of this issue, but I am assuming that somewhere in your gulp-serve config the default to serve your app is set to port:3000. By attempting to reach the other ports you listed your app is not loading...
The problem was somewhere in cookies. After I clear cookie it goes ok. I use Auth0 service for logging. Maybe the problem is somewhere in their angularjs sdk.
Until the end of my Angular application development period, I worked with two seperate projects. WebApi and Angular SPA.
Now I am trying to deploy them to our production server and because of the need for seperate SSL certificates, we decided to combine them and run in the same Project. So far so good...
I managed to combine them together and the server side code compiles. Now when I run the app, the first call to the API results in a parse error with the homepage contents (full of html). I understand that this is due to the $urlRouterProvider 's otherwise attribute, routing all the non-routed paths to the root "/".
I need to fix it, excluding the paths which includes /api in them in order to bypass Angular's routing system out of API's way. Any ideas to help?
EDIT: New project is a combination of WebApi (v2 - Asp.Net) and Client App (Angular v1.3.15 on MVC5 views. And yes, html5Mode(true) but doesn't change a thing if turned off).
EDIT2: Forgot to mention, the error is raised from a jQuery ajax call, outside the angular scope. :$
As interesting it is, I realized some other abnormalities in the way WebApi worked. Did some research and found out that it's because of the latest EntityFramework (v6.1.3). During my merge, I updated EF from v6.1.1 so uninstalled and 6.1.3 and installed back 6.1.1 and the problem is solved! That is very odd. EF 6.1.3 should have been a solid release without any breaking changes. Very odd...
Thanks to all who commented and tried to help.
EDIT: After some time, what I realized is this. EF models should be in sync with the Database in order to make successful database calls from WebApi. When I make an ajax call and the db is not in sync with the models, the problems in the question occures. I hope that information helps someone.
We're having strange, sporadic JavaScript error messages in our production log files (JavaScript errors are logged in the backend):
Uncaught Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=modules%2Fsome%2valid-directive-path.tpl.html
The error occurs only with directives. I'm not able to reproduce the errors locally. The templateUrl for the directives are all valid.
The only possible scenario that came to my mind was if the user presses the cancel/stop button in the browser while the page is loading (then i'm able to reproduce the error).
Does anyone have another idea or explanation? Or even a solution :-)
Cheers
Michael
We resolved the issue like this:
Since we are caching our HTML templates with $templateCache using the grunt ngTemplate plugin (https://www.npmjs.com/package/grunt-angular-templates) we do not have the above issues anymore.
Out of interest I was able to recreate this issue. By adding logging to angular I established that when the template load fails it does so with a status of 0 which made me think that the request was actually cancelled. This theory was backed up by the fact that we see no server side errors.
If I emulate a device that cannot support html5 routing and then add an arbitrary query string to the end of the route, it causes an infinite digest loop and in the end the whole page reloads a few times. This in turn was causing the outstanding template requests to be cancelled leading to exactly the errors I was seeing in the logs.
So, for me at least, this is really nothing to do with the loading of the templates, it's just an angular bug (which hopefully is going to be fixed in angular 1.3.8)
The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.