UPDATE
The "new-new" router has dropped, and the Angular CLI has turned off the router generator until it has integrated it.
In the interim, I've just been generating a component, renaming all of the files with a "+" if I want that route lazy loaded, then manually inserting the router config.
Lately I've been trying to teach myself Angular 2. Having watched ng-conf talks, I figured that since the angular-cli was more-or-less "blessed" by the Angular team, it might be a good way to spin up some example projects. However, I soon hit a snag.
The Problem
As of the time of writing this, generating routes with the angular-cli does not work out of the box.
Running ng new my-app
creates the structure and you start with the following:
my-app.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app-app',
templateUrl: 'my-app.component.html',
styleUrls: ['my-app.component.css']
})
export class MyAppAppComponent {
title = 'my-app works!';
}
Adding your first route with ng generate route my-route
leaves you with:
my-app.component.ts
import { Component } from '@angular/core';
import { MyRouteComponent } from './+my-route';
import { Routes , ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
@Component({
moduleId: module.id,
selector: 'my-app-app',
templateUrl: 'my-app.component.html',
styleUrls: ['my-app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@Routes([
{path: '/my-route', component: MyRouteComponent}
])
export class MyAppAppComponent {
title = 'my-app works!';
}
Note: I recently tried this on my work laptop and none of the ROUTE_PROVIDERS business was included.
All good, right? Unfortunately, if you navigate to /my-route nothing happens. Bummer.
The Solution
Fear not! All it takes to get the router to work is to wire up a few more things.
Credit: https://github.com/angular/angular-cli/issues/708
First, you need to add "Router" to the other router imports. Then all you need to do is add a constructor in my-app.component.ts. Its as simple as constructor(private router:Router) { }
Without further ado, here's the final result:
my-app.component.ts
import { Component } from '@angular/core';
import { MyRouteComponent } from './+my-route';
import { Router, Routes , ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
@Component({
moduleId: module.id,
selector: 'my-app-app',
templateUrl: 'my-app.component.html',
styleUrls: ['my-app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@Routes([
{path: '/my-route', component: MyRouteComponent}
])
export class MyAppAppComponent {
constructor(private router:Router) { }
title = 'my-app works!';
}
Final Thoughts
There is also one more way to make the routes work. If you add a routerLink to my-app.component.html the router will get instantiated behind the scenes. But that's not always the way you need to go about things.
Now that routing's out of the way...maybe I can get SASS working in the build process.
Happy cli-ing and routing!