Angular HTML5Mode - rewrite rule

Question

I am having a problem updating a tab on my website:

I copied this rewrite rule from github:

<rule name="Main Rule" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> 

This works great on a path such as https://www.mywebsite.com/dashboard .

However, when I update the path, for example https://www.mywebsite.com/tab/settings , my javascript loads fine, but my css directory is disabled by 1.

My script loads like this:

https://www.mywebsite.com/Scripts/angular.js

However, my CSS is trying to load as:

 https://www.mywebsite.com/tab/Content/bootstrap.min.css 

Using / tab / causes my problem.

My routes:

 .state('Template', { url: '', abstract: true, views: { 'header': { templateUrl: 'App/SharedViews/Landing/dashboardheader.html' } } }) .state('Template.AdminTab', { url: '/admin', views: { ' container@ ': { templateUrl: 'App/Views/Admin.html' } } }) .state('Template.Tab.Company', { url: '/company', views: { ' container@ ': { templateUrl: 'App/Views/Admin.html' }, ' tabs-views@ ': { templateUrl: 'App/Views/Company.html' } } }) .state('Template.Tab.Users', { url: '/users', views: { ' container@ ': { templateUrl: 'App/Views/Admin.html' }, ' tabs-views@ ': { templateUrl: 'App/Views/Users.html' } } }) 

How can I change the rewrite rule to load css correctly on URLs with a depth of 2+?

Answer 1

Must have its own path as: /Content/bootstrap.min.css

instead: Content/bootstrap.min.css

Putting '/' in front will allow the path based on the root directory.

Answer 2

I see offers from @maurycy up to a point, I agree with that. But this decision has its limitations. What if you want to deploy the application in a new context, i.e. https://www.mywebsite.com/my_new_app .

Now /Content/bootstrap.min.css will still point to https://www.mywebsite.com/bootstrap.min.css , which will again cause the problem.

In my opinion, if you want to control it, you can use the base tag . It determines what the base URL of your site is, and your browser will download all relative URLs (those that do not start with / ), with the base as the prefix for them. Install it in your HTML head tag as follows:

 <base href="/"> 

Now all your assets will be downloaded relative to this path, regardless of your current browser URL. In addition, you can specify any context here. For example, if you deployed the application under /my_new_app , just change href to /my_new_app/ (don't forget the trailing slash), and the URLs will start loading this way.

Hope this helps.