Angular 2: url change in the browser but the view is not displayed
<p>I have a simple App I have an issue when I try to navigate to a route.
My main component:</p>

<pre><code>    @Component({
    selector: 'my-app',
    template: `
    &lt;ul class="my-app"&gt;
        &lt;li&gt;
            &lt;a [routerLink]="['Login']"&gt;Login&lt;/a&gt;    
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a [routerLink]="['Projects']"&gt;Projects&lt;/a&gt;  
        &lt;/li&gt;
    &lt;/ul&gt; 
     &lt;br&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;`,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {
        path: '/Login',
        name: 'Login',
        component: LoginFormComponent,
        useAsDefault: false
    },
    {
        path: '/Projects',
        name: 'Projects',
        component: ListProjectsComponent,
        useAsDefault: true
    }
 ])

    export class AppComponent { ...
    ...
</code></pre>

<p>and I have a basic component </p>

<pre><code>@Component({
    selector: 'login-form',
    template: 
      `
        &lt;button (click)="goToProjects()"&gt;Go To Projects!&lt;/button&gt;
      `,
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, ROUTER_PROVIDERS]
})

export class LoginFormComponent implements OnInit {
...
 goToProjects(){
         let link = ['Projects',{}];
         this.router.navigate(link);
    }
..
}
</code></pre>

<p>I added the base Href to the main page 'index.html'</p>

<pre><code>&lt;head&gt;
    &lt;base href="/"&gt;
  &lt;/head&gt;
</code></pre>

<p>When I click the button, the url in the address bar change but the view is not displayed, what may go wrong ?</p>