This is the second version of creating a route in angular. as of today Feb. 28, 2017, i am using angular CLI version 1.0.0-beta.26

these are the versions of my environment:

  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.26
node: 7.4.0
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/compiler-cli: 2.4.6

1. Start by creating a new project, lets call this project basic-routing, send this command where you want to start this new basic angular project:

$ ng new basic-routing

2. Once the basic rouing project has been created, you can start the server with this command:

$ ng serve

* NOTE: you can also use ng s for short

3. Open your browser to http://localhost:4200 - you will see the message "It works!"

4. Now that we have our basic app running, lets create a new component called player. So when you click the link, it will show this component

$ ng g c player

* NOTE: g is short for 'generate' and c is short of 'component'

CREATING THE ROUTE

5. Now that we have our player component in our project let add the code to make this simple and basic routing happen. Open app.module.ts add the following code:

app.module.ts

import { RouterModule, Routes } from '@angular/router';

In @NgModule > imports add the following after HttpModule

,RouterModule.forRoot([{ path: 'player', component: PlayerComponent }])

NOTE: i tried the following formats for the path and each of these fails, the only path that works is 'player' - see errors at the bottom of this post
path: 'player/' NOT WORK
path: './player' NOT WORK
path: '/player' NOT WORK

app.component.html

6. open app.component.html and add the following HTML after the </h1>

<a routerLink="player">player</a>
<router-outlet></router-outlet>

NOTE: the following routerLinks also works
<a routerLink="/player">player</a>
<a routerLink="player/">player</a>

7. Open your browser to http://localhost:4200 then click on the 'player' link, then you should see the contents of ./player/player.component.html which is "player works!"

Done - Hope this short and very basic tutorial showed you how to create a simple and basic route in angular

WILD CARD PATH

you can also use a wild card like this:

{ path: '**', component: PageNotFoundComponent }


DEFAULT COMPONENT

You can also set the default component to load as soon as the app loads up with the following route

{ path: '', redirectTo: '/heroes', pathMatch: 'full' }

ERRORS

I got these errors when i changed the path as mentioned above

Unhandled Promise rejection: Invalid configuration of route '/player/:playerName': path cannot start with a slash ; Zone:  ; Task: Promise.then ; Value: ZoneAwareError {__zone_symbol__error: Error: Invalid configuration of route '/player/:playerName': path cannot start with a slash
    at v…, __zone_symbol__stack: "Error: Invalid configuration of route '/player/:pl…//localhost:4200/main.bundle.js:96306:57 []", __zone_symbol__message: "Invalid configuration of route '/player/:playerName': path cannot start with a slash"} Error: Invalid configuration of route '/player/:playerName': path cannot start with a slash
    at validateNode (http://localhost:4200/main.bundle.js:85739:15) [angular]
    at validateConfig (http://localhost:4200/main.bundle.js:85699:9) [angular]
    at Router.resetConfig (http://localhost:4200/main.bundle.js:23781:96) [angular]
    at new Router (http://localhost:4200/main.bundle.js:23692:14) [angular]
    at setupRouter (http://localhost:4200/main.bundle.js:66680:35) [angular]
    at AppModuleInjector.get (/AppModule/module.ngfactory.js:198:57) [angular]
    at AppModuleInjector.createInternal (/AppModule/module.ngfactory.js:239:60) [angular]
    at AppModuleInjector.NgModuleInjector.create (http://localhost:4200/main.bundle.js:59962:76) [angular]
    at NgModuleFactory.create (http://localhost:4200/main.bundle.js:59930:18) [angular]
    at http://localhost:4200/main.bundle.js:41240:61 [angular]
    at Object.onInvoke (http://localhost:4200/main.bundle.js:31263:37) [angular]
    at Zone.run (http://localhost:4200/main.bundle.js:95884:43) [ => angular]
    at Zone.run (http://localhost:4200/main.bundle.js:95884:43) [ => ]
    at http://localhost:4200/main.bundle.js:96306:57 []consoleError @ zone.js:420_loop_1 @ zone.js:449drainMicroTaskQueue @ zone.js:453
zone.js:422ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Invalid configuration of route '/player/:playerName': path cann…, rejection: ZoneAwareError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}consoleError @ zone.js:422_loop_1 @ zone.js:449drainMicroTaskQueue @ zone.js:453