Angular 2 Hosting in IIS: HTTP Error 404
I have a simple application with one component that expects certain parameters from url. there is only one route in the app:
const appRoutes: Routes =
path: 'hero/:userId/:languageId',component: HeroWidgetComponent }];
In Index.html I have this in the header <base href="/">
I use webpack, and the application works fine in the development environment when viewing the URL: http://localhost:4000/hero/1/1
.
However, when building an application to produce and get the distribution files, then to put it on IIS. When trying to view the same URL, I get the following error:
HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
The app works fine if I remove all routing and just browse: http:localhost:4200
in IIS.
source to share
We have to return IIS to index.html by adding a rewrite rule.
Step 1: Install IIS URL Rewrite Module
Step 2: Add rewrite rule to web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
source to share
If you are using an IIS app like myApp
below your default website (then your app url should have the syntax http: // localhost / myApp / my-angular-route ) try changing the action to
<action type="Rewrite" url="/myApp/"/>;
Then it works seamlessly for my environment.
Step by step instructions can be found here: https://blogs.msdn.microsoft.com/premier_developer/2017/06/14/tips-for-running-an-angular-app-in-iis/
source to share