Angular Js SPA is not working after publishing in IIS 8.5

Question

I'm using SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS8.5 routing not working.

When i run the app using IIS express the url was http://localhost:12345/#/home After publishing http://localhost/myapp/#/home

Here is my app.js,

 $routeProvider.when("/home", {
        controller: "homeController",
        templateUrl: "/app/views/home.html"
    });

In index.html

<li> <a href="#/home">Home</a></li>

When i publish my app in windows azure, app is working fine. Because the url was myapp.azurewebsite.net. myapp.azurewebsite.net/#/home

How can i host similarly in local IIS.

Laohyx · Accepted Answer · 2015-10-31 08:52:00Z

1

You almost find find the answer -- that is all about absolute file path.

Quick fix:

Change templateUrl: "/app/views/home.html" to templateUrl: "app/views/home.html" (remove the heading slash)

Answer:

If you specify the templateUrl as /app/views/home.html, which starts with /, you tell the browser to get it from root.

If your webapp is stored in http://localhost/myapp/, your browser will visit http://localhost/app/views/home.html to get the template.

That also explains why your app works fine when it is places in root directory, but not working in sub directories, like http://localhost/myapp/#/home .

Do not worry about the side effect of relative path. All the resources are calculated relative to index.html.

answered Oct 31, 2015 at 8:52

Laohyx

3033 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prasad Kanaparthi Over a year ago

Superb. After removing / working fine :). Also for images..some of them it is working. for images i've used lazy loading feature... bn-lazy-src [bennadel.com/blog/2498-lazy-loading-image-with-angularjs.htm]. for this img type... again the same problem. Always showing default image.. even though image exists. Can you suggest.. Edit my question. added image.

Laohyx Over a year ago

@PrasadKanaparthi These images are stored outside the angular's directory? If so, the image path is irrelevant to the angular path, and they're uploaded to some backend? you may use absolute path for these files. and store images' base path using angular's constant to specify the backend's image storage directory.

Collectives™ on Stack Overflow

Angular Js SPA is not working after publishing in IIS 8.5

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related