Routing and navigation in Angular 2

Question

I am going through the tutorials for Angular 2 and have been able to get a simple application up and running. Now, I am moving on to the routing and navigation part found h

Answer 1

You can fix the error by implementing hash location strategy:

To enable HashLocationStrategy it's like this:

RouterModule.forRoot(routes, {useHash: true})

URL can contain some data prepended with a # character.

The # part of the URL is called the hash fragment. It’s never sent to the server,

example: http://example.com/#/clients

Answer 2

For this issue, you need to use PathLocationStrategy or HashLocationStrategy for your application. It's available in the 'angular2/router'.

Example for using HashLocationStrategy:

boot.ts

bootstrap(AppCmp, [
       ROUTER_PROVIDERS,
       provide(LocationStrategy, {useClass: HashLocationStrategy})
   ]);

and in your main component,

class AppCmp {
          constructor(location: Location) {
          location.go(location.path());
       }

The location.path() dynamically gives the path for the page to be loaded.

Answer 3

Angular 2 by default uses HTML5 routing, you either have to map all server requests to index.html by adding the following to web.config

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="PATH TO INDEX.HTML" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

or implement the HashLocationStrategy, as described in angular docs here

provide(LocationStrategy, {useClass: HashLocationStrategy})

Answer 4

This is my solution: https://csjdpw.atlassian.net/wiki/display/~Genhan.Chen/404+issue+for+Angular+2+routing

Refers to another posting: AngularJS 2 routing

Answer 5

Old question, but I wanted to provide this suggestion as an alternative for future readers as I preferred the Rewrite method:

Building upon the answers from stas.ivash and Adrian Moisa: I used their URL Rewrite suggestions, but instead of listing out routes, I modified the regex to route everything excluding the files that our Angular 2 CLI generated app needs, with the given extensions (.bundle.js, .bundle.map, etc...):

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

I can't really speak to the performance implications of using this RegEx solution in a Production environment, but it works well for us on our Dev and Stage environments.

Answer 6

In addition to @stasivash answer: If you have trouble making ajax requests to a certain path in your project, such as YOUR-DOMAIN/api/..., I suggest adding the following condition:

<add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />

resulting in:

<rewrite>
  <rules>
      <rule name="redirect all" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
              <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" appendQueryString="true" />
      </rule>
  </rules>
</rewrite>