Angular 2 Tutorial: Routing in IIS 8.5

Mauro Ebert

unread,

Jan 16, 2017, 1:31:33 PM1/16/17

to Angular

Hello everybody,

I'm new to Angular 2 and interested in eventually consider adopting it for my company's web development projects, so I decided to have a look at its capabilities by following the Tour of Heroes tutorial.
I have used the instructions provided in Cookbook > VS 2015 QuickStart to set up the project and add the quickstart-master files.

Everything worked fine until I had to perform the steps in 6. Routing (as warned in the instructions at the end of the project setup).
After following the steps to add the router outlet and link in the code, the tutorial app shows the message hard-coded in index.html ("Loading AppComponent content here ..."), instead of the app component html.

In order to solve the issue, I then added a rewrite rule into my web.config, which contains the following:

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular2" stopProcessing="true">
        <match url=".*" />
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Unfortunately, this apparently doesn't help (has no effect) in getting the expected behavior back.
I'd truly appreciate if someone with (some) more knowledge could shed some light on the problem, what I am possibly doing wrong and its actual solution.

Thank you in advance!

Will Huang

unread,

Jan 17, 2017, 9:59:25 AM1/17/17

to Angular

You may try this:

    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA" stopProcessing="true">

                    <match url=".*" />
                    <action type="Rewrite" url="/" />

                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                </rule>
            </rules>
        </rewrite>
    </system.webServer>

Mauro Ebert於 2017年1月17日星期二 UTC+8上午2時31分33秒寫道：

Mauro Ebert

unread,

Jan 18, 2017, 4:52:27 AM1/18/17

to Angular

Thanks for your reply.

I have modified the web.config following your suggestion, but it didn't work.

I have even added a second condition as illustrated in this article:

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular2" stopProcessing="true">
        <match url=".*" />
        <action type="Rewrite" url="/"

/>
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Unfortunately, I still get the same behavior... :(

Op dinsdag 17 januari 2017 15:59:25 UTC+1 schreef Will Huang:

Mauro Ebert

unread,

Jan 19, 2017, 4:40:10 AM1/19/17

to Angular

The solution to my problem (getting the tutorial working in a local IIS 8.5, as application running under the default website, hence with the URL like http://localhost/QuickStart/) includes the following steps:

1 - web.config:

    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
            </files>
        </defaultDocument>

              <rewrite>
            <rules>
                <rule name="Angular2" stopProcessing="true">
                    <match url=".*" />

<conditions logicalGrouping="MatchAll">

                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

                        <add input="{REQUEST_URI}" pattern="^/$" negate="true"/>
                    </conditions>
                    <action type="Rewrite" url="/QuickStart/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>

2 - index.html:

<head>
    <base href="/QuickStart/">
    <title>Angular QuickStart</title>

3 - app-routing.module.ts:

const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'detail/:id', component: HeroDetailComponent },
    { path: 'heroes', component: HeroesComponent }
];

The solution should be applicable to any Angular 2 app that needs to be deployed in IIS, so I hope this helps other people as well!

Have a nice day,

M

Op maandag 16 januari 2017 19:31:33 UTC+1 schreef Mauro Ebert:

Braden Clapp

unread,

Sep 6, 2017, 2:27:14 AM9/6/17

to Angular and AngularJS discussion

What would I need to change if I wanted to be able to go directly to the HeroDetailComponent? Say I have an email sent to me with a link to the hero's id: www.example.com/QuickStart/detail/22

I have a project where I am trying to do something similar but the path is overwritten.

Reply all

Reply to author

Forward