Shahzad Shahzad - 6 months ago 78
AngularJS Question

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

Answer

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>