Brett Brett - 1 month ago 21
ASP.NET (C#) Question

.NET MVC 4.5.2: Ignore certain routes and let Angular 2 handle them

I have a project built with Visual Studio 2015 and .NET MVC 4.5.2 and recently started using Angular 2 as the front-end. Before introducing Angular 2, I had routes such as /Plan/Dashboard and /Plan/Production. I used JQuery/Ajax to replace content when clicking links instead of doing full page refreshes, however the URL would never change, so clicking forward/back/refresh wouldn't work as you'd expect it to. Now that I am using Angular 2, the URL changes appropriately so back/forward buttons work, however refreshing the page doesn't work. For example, if Angular 2 routing changes my URL from /Plan/Production to /Plan/Production/Selling and I refresh it, I believe .NET searches for that route and can't find it, which results in the URL changing to

https://localhost:44301/Error/NotFound?aspxerrorpath=/Plan/Production/Selling
and the content simply displays "Error". My question is, is there a way to tell .NET to ignore any route that begins with /Plan/Production/ and allow Angular 2 to handle the routing for it? I will need to do this with other pages as well, but am focusing on /Plan/Production for now.

Answer

Try something like this in your web.config:

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Redirect to NG2" patternSyntax="Wildcard" stopProcessing="true">
                    <match url="Plan/Production/*" />
                    <action type="Rewrite" url="/Plan/Production" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

You will need to have the URL Rewrite Module installed to use this.

Comments