Router Migration

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

First step of migration is to migrate the Router.

Our example To-do application uses FlowRouter in order to define it's routes, we can see the definitions in /imports/startup/client/routes.js.

Our goal now is to migrate the router into Angular 2 Router - this step is very important and we need to do it first in order to load later Angular 2 Components with Blaze Template inside them.

So let's start by commenting or removing the FlowRouter definitions:

7.1 Commented all the FlowRouter definitions imports/startup/client/routes.js
11
12
13
14
15
16
17
 
49
50
51
52
// Import to override accounts templates
import '../../ui/accounts/accounts-templates.js';
 
/*
FlowRouter.route('/lists/:_id', {
  name: 'Lists.show',
  action() {
...some lines skipped...
  name: 'resetPwd',
  path: '/reset-password',
});
*/

And now let's define those routes using Angular 2 Router - the definition in a new file that in charge of the routes.

We will start with a single route which in charge of the list view.

Our goal is to create a route to display a specific To-do list, and we will later redirect to this page by default with a random list.

7.2 Added routes definitions using Angular 2 router client/imports/app.routes.ts
1
2
3
4
5
6
7
8
import {ModuleWithProviders} from [email protected]/core';
import {Routes, RouterModule} from [email protected]/router';
 
const appRoutes: Routes = [
    {path: 'lists/:_id', component: ListShowComponent}
];
 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Angular 2 routes creates a NgModule with our routes defined, so we need to import it into our module under imports:

7.3 Imported the routes files into the module client/imports/app.module.ts
1
2
3
4
5
6
7
 
16
17
18
19
20
21
22
23
import {NgModule} from [email protected]/core';
import {BrowserModule} from [email protected]/platform-browser';
import {MainComponent} from "./main.component";
import {routing} from "./app.routes";
 
@NgModule({
    // Components, Pipes, Directive
...some lines skipped...
    providers: [],
    // Modules
    imports: [
        BrowserModule,
        routing
    ],
    // Main Component
    bootstrap: [MainComponent]

Also, we need to add <base> tag in our <head> for the router:

7.4 Added base tag client/index.ng2.html
5
6
7
8
9
10
11
  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />
  <link rel="shortcut icon" type="image/png" href="favicon.png?v1" sizes="16x16 32x32 64x64">
  <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-precomposed.png">
  <base href="/">
</head>
<body>
    <app></app>

Noticed that we used a new component in the routes? ListShowComponent - let's create a stub component for this component (we will implement it later).

7.5 Created a stub for ListShowComponent client/imports/components/list-show.component.ts
1
2
3
4
5
6
7
8
import {Component} from "@angular/core";
 
@Component({
    template: 'Hello ListShow!'
})
export class ListShowComponent {
 
}

And now let's import this component in the routes file, and we need to declare that Component in our NgModule declarations:

7.6 Added router imports client/imports/app.module.ts
2
3
4
5
6
7
8
9
10
11
12
13
14
import {BrowserModule} from [email protected]/platform-browser';
import {MainComponent} from "./main.component";
import {routing} from "./app.routes";
import {ListShowComponent} from "./components/list-show.component";
 
@NgModule({
    // Components, Pipes, Directive
    declarations: [
        MainComponent,
        ListShowComponent
    ],
    // Entry Components
    entryComponents: [
7.6 Added router imports client/imports/app.routes.ts
1
2
3
4
5
6
import {ModuleWithProviders} from [email protected]/core';
import {Routes, RouterModule} from [email protected]/router';
import {ListShowComponent} from "./components/list-show.component";
 
const appRoutes: Routes = [
    {path: 'lists/:_id', component: ListShowComponent}

Now we need to point Angular 2 routes where to insert the route component, so we need to use router-outlet directive in our main component:

7.7 Added router-outlet directive client/imports/main.component.ts
3
4
5
6
7
8
9
 
@Component({
  selector: 'app',
  template: '<router-outlet></router-outlet>'
})
export class MainComponent {
}

So now our app should be empty, because non of the existing Blaze Templates loaded (they were loaded by the Router according to the current URL).

In the next step we will load the Blaze Template into our route.