CODEWITHSUNDEEP
angularjsiisurl-rewritingangular-ui-router
RandomUs1r
RandomUs1r

Reputation: 4188

Angular HTML5Mode - Rewrite rule

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?

Upvotes: 5

Views: 919

Answers (2)

31piy
31piy

Reputation: 23869

I see the suggestions from @maurycy and up to a point, I agree with it. But this solution has its own limitations. What if you want to deploy your app 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 issue.

In my opinion, if you want to control it, you can use a base tag. It defines what is the base URL of your website, and your browser will load all the relative URLs (the one which don't start with a /) with the base as a prefix to them. Set it in your HTML's head tag as follows:

<base href="/">

Now, all your assets will be loaded relative to this path, regardless of what your current browser URL is. Plus, you're free to specify any context here. For example, if you've deployed your app under /my_new_app, simply change the href to /my_new_app/ (don't forget the trailing slash), and the URLs will start loading relative to this path.

Hope this helps.

Upvotes: 0

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

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.

Upvotes: 4

Related Questions