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

// 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',

});

*/

Improve this code

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

import {ModuleWithProviders} from '@angular/core';

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

const appRoutes: Routes = [

    {path: 'lists/:_id', component: ListShowComponent}

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Improve this code

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

import {NgModule} from '@angular/core';

import {BrowserModule} from '@angular/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]

Improve this code

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

7.4 Added base tag client/index.ng2.html

  <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>

Improve this code

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

import {Component} from "@angular/core";

@Component({

    template: 'Hello ListShow!'

})

export class ListShowComponent {

Improve this code

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

import {BrowserModule} from '@angular/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: [

Improve this code

7.6 Added router imports client/imports/app.routes.ts

import {ModuleWithProviders} from '@angular/core';

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

import {ListShowComponent} from "./components/list-show.component";

const appRoutes: Routes = [

    {path: 'lists/:_id', component: ListShowComponent}

Improve this code

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

@Component({

  selector: 'app',

  template: '<router-outlet></router-outlet>'

})

export class MainComponent {

Improve this code

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.

Blaze to Angular 2 Migration

https://github.com/dotansimha/angular2-blaze-migration-tutorial

Router Migration