After hosting Angular2 app on IIS direct url is not working
Question
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?
3 answers
solution1
23 ACCPTED 2016-08-18 03:33:19
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>
- Setting up base tag in index.html. It should be immediately after <head> tag
<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.
solution2
1 2017-05-08 06:23:38
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!
solution3
0 2018-10-06 17:58:46
[windows hosting] Create text file and call it " web.config " open it and past the content below then make sure it is in the root directory in your hosting
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" 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="./index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
BEST OF LUCK :) It is rewarding when I save someone else time!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.