Angular2 routing with Asp.net 4.5

Question

I need a help. I start to develop angular2 with Asp.net core and everything was perfect. For redirecting all 404 request to index.html I use this code in Startup class.

app.Use(async (context, next) =>
 {
 await next();
 if (context.Response.StatusCode == 404
 && !Path.HasExtension(context.Request.Path.Value))
 {
 context.Request.Path = "/index.html";
 await next();
 }
 });

But, I need to return to asp.net 4.5 and I have now a big problem with routing. I try to use similar code in Owin Startup class but that didn't resolve a problem.

How to move all request to index.html? One example: I have link which redirect to /logout, but with this code now app.module don't see /logout and I get redirected to home page of app.

In tutorial how to use angular2 with asp 4.5 (https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html) in last paragraph says:

If this application used the Angular router, a browser refresh could return a 404 - Page Not Found. Look at the address bar. Does it contain a navigation url (a "deep link") ... any path other than / or /index.html?

You'll have to configure the server to return index.html for these requests. Until you do, remove the navigation path and refresh again.

How to do this? Thank you!

Answer 1

You could redirect everything to the index.html page to solve this issue, here's the configuration code I used in one of my project:

<rewrite>
 <rules>
 <rule name="RedirectEverything" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
 </conditions>
 <action type="Rewrite" url="/index.html" />
 </rule>
 </rules>
</rewrite>

Add this under the the system.websever section in your web.config

• N8ALL3N: seconded...just found this as I have to use 4.5 with a Vue app, and had similar code as the OP. This worked awesome!