Search code examples
angularjsiisroutesumbraco

AngularJS SPA within Umbraco

I have an Umbraco 6.4 website, under which I am now trying to put an AngularJS 2 SPA.

Umbraco: /

Angular: /appname

My problem is with the routing that is done by Umbraco. Since Umbraco handles all of the routing up to the root level, when the Angular app gets refreshed: /appname/apage I get a 404 - Not Found.

I have added a URL rewrite in the UrlRewriting.config, however I have done it in a way that the destination url is always the index.html file.

<add name="myapp" virtualUrl="^~/myapp/*" rewriteUrlParameter="ExcludeFromClientQueryString" destinationUrl="~/myapp/index.html" ignoreCase="true" />

What I would like to be able to do is define a rewrite which lets me override the Umbraco routing whenever the path begins with /myapp/.

I have read this blog post, but it doesn't really relate to my problem because the way I have built my SPA, it doesn't have anything to do with Umbraco. Also, I must have Umbraco as the root directory, and therefore I cannot rely on IIS to do this for me either.

It would be great if someone, anyone, could point me in the direction. Thanks

Solution

  • For anyone else who may have a similar issue:

    I able to work around this problem by adding a web.config to the /appname directory and added the following configuration.

    <?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <rewrite>
         <rules>
            <rule name="ruleName" 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="/myapp/" />
            </rule>
         </rules>
      </rewrite>
      <defaultDocument enabled="true">
         <files>
            <clear />
            <add value="index.html" />
         </files>
      </defaultDocument>
   </system.webServer>
</configuration>