Angular 2 RC5 to Angular 2.0 Final: Migration Gotchas

I recently started developing in Angular using Typescript. I started with Angular 2 RC5 (release candidate 5). Just last week, Google announced the live release of Angular 2.0. I spent the past couple days making my app, thus far written with Angular 2 RC5, work in Angular 2.0.

This post consists of a quick review of how I migrated and a summary of the changes that I needed to make to my code in order for it to work in 2.0. This is not meant to be an exhaustive list of what anyone needs to do – that depends on what functionality you are utilizing. I am posting it in hopes that it will help others. The topics I will cover are:

• How I Migrated
• Changes to routes.ts
• Changes to appmodule.ts
• Global changes to other components

How I Migrated:

First, I followed the quick 5-minute quickstart to build a new Angular 2.0 app that Google has on their website here. Then I simply kept the node_modules folder and the package.json and deleted everything else. I then copied all the application files that I had in my RC5 environment to the folder with the 2.0 package.json and node_modules folder. I then ran npm start and debugged the errors as they showed up.

To be able to figure out what needed to change, I wound up creating yet another 2.0 environment and making it most of the way through the more in-depth Tour of Heroes tutorial on Google’s angular.io site. I then compared my app files from RC5 to the recommended 2.0 files (with the npm start and console.log error messages guiding where to look).

Changes to your main routes.ts file:

(or whatever you have named the file that contains your routes)

change:

import { RouterConfig } from “@angular/router”;

to:

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

Add this import:

import { ModuleWithProviders }  from “@angular/core”;

The code to create the routes should look like this:

const appRoutes: Routes = [

{

path: “”,

component: AppComponent

},

{

path: “about”,

component: AboutComponent

}

];

Add this at the bottom of the file (after the end of the array that lists your routes):

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

Changes to app.module.ts:

change:

import { routes } from “./routes”;

to:

import { routing } from “./routes”;

Note that this “routing” is exported in the last line of the routes.ts file, as described above.

Change:

import { HTTP_PROVIDERS } from “@angular/http”;

to:

import { HttpModule } from “@angular/http”;

• remove the HTTP_PROVIDERS from the providers section in the @NgModule
• add “HttpModule” (without quotes) to the imports section of @NgModule decorator
• add “routing” (without quotes) to the imports section of the @NgModule decorator

If you are using Forms functionality, then add this import line:

import { FormsModule } from “@angular/forms”;

and

• add “FormsModule” (without quotes) to the imports section of the @NgModule decorator

Still in your app.module.ts :

• Make sure you have imported every Component from the file you export that Component.
• make sure that the declarations section in the app.module.ts file includes all of your components that have been imported.

Changes in other components:

remove these lines from every component.ts file:

import { FORM_DIRECTIVES } from “@angular/common”;

and take out the directives section from the @Component decorator:

    directives: [

        …FORM_DIRECTIVES,

    ],

remove all of these lines from every component.ts file:

import { HTTP_PROVIDERS } from “@angular/http”;