Angular HTML5Mode - Rewrite rule

Question

I'm experiencing a pathing issue when I refresh a tab on my site:

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 refresh a path like https://www.mywebsite.com/tab/settings my javascript loads fine, but my css directory is off by 1.

My Scripts path loads correct like so:

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

However, my CSS is trying to load as :

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

With the /tab/ causing my issue.

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 modify the rewrite rule to load css correctly on urls that are 2+ segments deep?

Answer 1

Should have your path as: /Content/bootstrap.min.css

instead of: Content/bootstrap.min.css

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