Getting Generated Routes to Work in Angular-CLI

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!


comments powered by Disqus