Get Angular2 Routing Working on Iis 7.5

Get Angular2 routing working on IIS 7.5

(For angular 2, angular 4)

Create a web.config file as in mentioned article.

<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>

Place it in the root directory (same as index.html) of your site. Mine is in the dist folder (angular-cli project).

After deploying, go to IIS if you have the access and you can click on the rewrite-rules icon and see that it read this config. If you do not see and icon for rewrite rules, you will need to enable the module under "modules" icon. This code snippet was not written by be but I wanted to share better implementation details.

Deploy Angular To IIS 7.5 Not Working Normal

You need to create a redirect to index.html in the IIS for any route because in an Angular SPA the app is responsible for the routing not the server See here Angular routing.

Once e.g. http://yourdomain/ is requested -> index.html gets served and finally the app gets bootstrapped.

But once e.g. http://yourdomain/login is requested and there is no server side redirect to index.html the server doesn't have any resources mapped to that route and resolves the request with a 404 - Not Found Error.

Once you serve the index.html for any request that would end in a 404 - Not Found Error (except the assets like css, images fonts) the Angular router takes over and shows the according view once the app is bootstrapped.

Here an example rewrite rule for the IIS:

<rule name="Angular" 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>

After hosting Angular2 app on IIS direct url is not working

I get this resolved by doing following steps ..

1. Downloaded URL Rewriter module from https://www.microsoft.com/en-au/download/details.aspx?id=7435

2. 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>

how to host angular2 application in IIS?

I followed below steps to host application in IIS.
1. build angular application using ng build --prod
2. copy dist folder to a new folder
3. created virtual directory for this new folder in IIS.

it worked.

Angular4+ router redirects to home page in IIS

Probably all you need to do is change

<action type="Rewrite" url="/ePortal" />

to

<action type="Rewrite" url="/ePortal/index.html" />

When you redirect to the root it will drop the end of the url, you need to bring in the indexfile straight up.

Here is good info about this issue:
https://gingter.org/2017/03/20/deep-link-angular-spa-iis/

Angular 2 + IIS on refresh 404 error

Solved.
Steps:

1. Add rewrite in web.config
   with action like this
   <action type="Rewrite" url="/eUsluge.Administration.UI/" appendQueryString="true" />

2. Index.html add this

<base href="/Application/" />

---

Related Topics