Menu
We have developed Angular2 App.
It is working fine while we are running under angular-cli with 'ng serve'.
Once we host the app to IIS 7.5, we can browse to root of the app without much of the problem and we can navigate to whatever other views from app navigation created.
But issue starts when user try to load url which is targeting specific route or component.
so if we go to http://serverurl ... it loads index.html and then clicking on navigation link on index.html it takes user to http://serverurl/route1/component1
But when user tries to go to url http://serverurl/route1/component1 directly by typing http://serverurl/route1/component1 in browser address bar, it is sending that request to IIS, and that returns and error with resource not found.
And it is easy to understand, that url is not exists on server. That is angular url. Ideally, it should load index.html and pass rest of the url to angular router and load that /route1/component1. And that works with 'ng serve' but does not work with IIS 7.5. Is there any settings I have to do in IIS to get it working ? Or in anything I have to do in Anuglar2 App ?
Can anyone suggest me how to get this fixed?
794
I get this resolved by doing following steps ..
Downloaded URL Rewriter module from https://www.microsoft.com/en-au/download/details.aspx?id=7435
Added following to my web.config
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration><base href="/"/>These three steps will set you up for deployment of Angular2 / Angular App with html5mode url on IIS 7.5 or IIS 8.0
Hope this will help. I have to go through few answers to get this one resolved.
112
An even simpler change worked for me, using Angular 4.0 and IIS 6.1. This allowed me to use a named site instead of the default folder or the rewriting above. I just changed the base href from '/' to the name of my app folder:
<head>
<base href="MyApp">
...
Hope this works for others!
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
