AngularJS Routing in IIS

Question

I have developed the angularJs application which is hosted in the IIS root i.e) I make it run in Localhost. If i type localhost in browser and hit enter, my application is opened and works perfectly.

The problem is, I have some other applications concurrently running under localhost. For ex) localhost/hris, localhost/CMS etc., those are asp.net applications. After I hosted the angular app, if try to open my application it shows me the below javascript error in browser console...

Uncaught Error: ASP.NET Ajax client-side framework failed to load.
ScriptResource.axd:1 Uncaught SyntaxError: Unexpected token <

I got this two errors multiple times...

How do i overcome this?

FYI:- I have implemented routing in my angular app. One more thing is URL Rewrite, I have it as below in my web.config...

<rewrite>
    <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}"  pattern="api/(.*)" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
        </rule>
    </rules>
</rewrite>

I'm a very beginner for angularJS.

Anybody help me on this...

Thanks in advance...

In what way are you other applications affected when the angular app is hosted in the route? Are any error messages shown when attempting to navigate to those applications? — Scott Lyons
– Scott Lyons, Commented Mar 16, 2016 at 9:13

user5906610 · Accepted Answer · 2016-03-17 11:23:26Z

ASP.NET-based web applications very often make requests to WebResources.axd file to retrieve assembly resources and serve them to the Web browser. There is no such file exists on the server because ASP.NET generates the content dynamically when WebResources.axd is requested. So if you have a URL rewrite rule that does rewriting or redirection only if requested URL does not correspond to a file or a folder on a web server’s file system, that rule may accidentally rewrite requests made to WebResources.axd and thus break your application.

This problem can be easily prevented if you add one extra condition to the rewrite rule:

<rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}"  pattern="ITA_CALENDER_API/(.*)" negate="true" />
            <add input="{URL}" negate="true" pattern="\.axd$" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

Collectives™ on Stack Overflow

AngularJS Routing in IIS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related