router-outlet not working my component

Question

I try to learn angular 2, to redesigning my personal website, but i have a problem, my application not load my component when i go in the route appropriate with the click in my navigation bar.

In my navbar.html i have 2 link :

        <li><a [routerLink]="['Home']"><i class="fa fa-home"></i></a></li>
        <li><a [routerLink]="['Langages']">Langages</a></li>

and i declare my route in my app.component.ts in @RouteConfig :

    {path: '/', name: 'Home', component: HomeComponent, useAsDefault: true},
    {path: '/langages', name: 'Langages', component: LangagesComponent},

and in my app.component.ts i have a template with a to view my navigation bar and below i add a tag to see my HomeComponent and if i switch page i see my LangagesComponent and not HomeComponent... so for this moment, i don't see HomeComponent and other component.

PS : in my LangagesComponent i have :

import {Component} from "angular2/core";

@Component({
    templateUrl: "./dev/langages/langages.html"
})

export class LangagesComponent {}

Thank you for your help.

Answer 1

name in routes is not supported (that was removed more than 1/2 year ago)

<li><a [routerLink]="['/']"><i class="fa fa-home"></i></a></li>
<li><a [routerLink]="['/langages']">Langages</a></li>

{path: '', component: HomeComponent, pathMatch: 'full'},
{path: 'langages', component: LangagesComponent},

path in route configuration must not contain a leading / . In routerLink or router.navigateByUrl() a leading / indicates an absolute path, while without / the path is assumed to be relative.

There is also no @RouteConfig anymore (except when you use Dart instead of TS)

See https://angular.io/docs/ts/latest/guide/router.html for more details.

Answer 2

name and useAsDefault(not sure) were removed long back. Now you should setup your routes as follow,

{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: "home", component: HomeComponent},    
{ path: 'language',  component: LangagesComponent },

.HTML

<li><a routerLink="home"><i class="fa fa-home"></i></a></li>
<li><a routerLink="language">Langages</a></li>

NOTE : Also make sure you have router-outlet placed somewhere to load dynamic views using router in HTML.