Angular2 Release Candidate 1 (RC1) Changes

This article summarizes a couple of changes I encountered during the migration of angular2 beta 17 to angular2 rc1.

Angular2 Packages for RC1

Previously angular2 could be pulled in by npm using the following configuration entry in package.json

"angular2": "2.0.0-beta.17",

1	"angular2": "2.0.0-beta.17",

Now all packages have been split up and moved to @angular instead of angular2.

package.json

"dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "core-js": "2.2.2",
    "rxjs": "5.0.0-beta.6",
    "reflect-metadata": "0.1.3",
    "zone.js": "0.6.12",
    "toastr": "2.1.2",
    "jquery": "2.2.3"
}

"dependencies": {

"@angular/common": "^2.0.0-rc.1",

"@angular/compiler": "^2.0.0-rc.1",

"@angular/core": "^2.0.0-rc.1",

"@angular/http": "^2.0.0-rc.1",

"@angular/router": "^2.0.0-rc.1",

"@angular/platform-browser": "^2.0.0-rc.1",

"@angular/platform-browser-dynamic": "^2.0.0-rc.1",

"core-js": "2.2.2",

"rxjs": "5.0.0-beta.6",

"reflect-metadata": "0.1.3",

"zone.js": "0.6.12",

"toastr": "2.1.2",

"jquery": "2.2.3"

}

Angular2 rc1 Bootstrapping

The imports for bootstrapping an angular2 application have changed from:

import {bootstrap} from 'angular2/platform/browser';
import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';

1 2	import {bootstrap} from 'angular2/platform/browser'; import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';

import {bootstrap} from '@angular/platform-browser-dynamic';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

1 2	import {bootstrap} from '@angular/platform-browser-dynamic'; import {LocationStrategy, HashLocationStrategy} from '@angular/common';

Routes

Import and route configuration have been changed. In angular2 beta 17 routes have been configured using a RouteConfig like in the example below:

import {Component} from '@angular/core';
import {Router, ROUTER_DIRECTIVES,Routes} from '@angular/router';

@RouteConfig([
   { path: '/home',                component: Home,        name: 'Home', useAsDefault: true },
   { path: '/login',               component: Login,       name: 'Login' },
   { path: '/gallery/:id/:image',  component: Gallery,     name: 'Gallery' }
])

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

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

@RouteConfig([

{ path: '/home', component: Home, name: 'Home', useAsDefault: true },

{ path: '/login', component: Login, name: 'Login' },

{ path: '/gallery/:id/:image', component: Gallery, name: 'Gallery' }

])

In angular2 rc1 @RouteConfig now has been replaced by @Routes.

import {Component} from '@angular/core';
import {Router, ROUTER_DIRECTIVES,Routes} from '@angular/router';

@Routes([
   { path: '/',                   component: Home        },
   { path: '/login',              component: Login       },
   { path: '/gallery/:id/:image', component: Gallery }
])

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

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

@Routes([

{ path: '/', component: Home },

{ path: '/login', component: Login },

{ path: '/gallery/:id/:image', component: Gallery }

])

There seems to be no name or useAsDefault parameters any more. That is why I changed the path of the home controller from /home to /.

Navigation

Previously if you wanted to navigate to a different page, you had to use the following code:

this._router.navigate(['Home']);

1	this._router.navigate(['Home']);

In this instance the navigation parameter is the name of the route. Since in angular2 rc1 there is no name parameter for routes any more, you now have to use the following code to navigate to a different page.

this._router.navigate(['/home']);

1	this._router.navigate(['/home']);

In case you need any navigation parameters, they now simply have to be provided in order of appearance in the route definition.

this._router.navigate(['gallery', galleryId, image]);

1	this._router.navigate(['gallery', galleryId, image]);

Checking for Route Parameters

In angular2 beta 17 you could use RouteParams to check for parameters provided by the current URL.

import {ROUTER_DIRECTIVES, RouteParams, Router} from 'angular2/router';

...
constructor(private params: RouteParams) {
   this.galleryId = +params.get('id');
   this.imageNumber = +params.get('image');
}

import {ROUTER_DIRECTIVES, RouteParams, Router} from 'angular2/router';

...

constructor(private params: RouteParams) {

this.galleryId = +params.get('id');

this.imageNumber = +params.get('image');

}

By the way, the + symbol converts the parameters to a number.

This has now changed and in order to get route parameters you have to use RouteSegment, instead.

import {ROUTER_DIRECTIVES, Router, RouteSegment} from '@angular/router';

...
constructor(private routeSegment: RouteSegment) {
   this.galleryId = +routeSegment.getParam('id');
   this.imageNumber = +routeSegment.getParam('image');
}

import {ROUTER_DIRECTIVES, Router, RouteSegment} from '@angular/router';

...

constructor(private routeSegment: RouteSegment) {

this.galleryId = +routeSegment.getParam('id');

this.imageNumber = +routeSegment.getParam('image');

}

RouterLink Problem

In angular2 beta 17 I had no problem putting a routerLink attribute on a tr element which also served as the element for a loop:

<tr *ngFor=... [routerLink]="['Gallery',{id:gallery.Id,image:1}]></tr>

1	<tr *ngFor=... [routerLink]="['Gallery',{id:gallery.Id,image:1}]></tr>

When I ran this code with angular2 rc1, however, I encountered the following error in the browser console:

Can't bind to 'href' since it isn't a known native property

1	Can't bind to 'href' since it isn't a known native property

It seems that the routerLink attribute can now only be bound to a link element a. In my example placing a link element with the routerLink attribute around the table row fixed the problem.

Summary

This article summarizes some of the challenges and changes I had to make during the migration from angular2 beta 17 to angular2 rc1. If you have any additional comments regarding the migration to the latest angular version, please leave a comment below.

8 Replies to “Angular2 Release Candidate 1 (RC1) Changes”

Chris Kapilla

2016-05-20 at 20:20

thanks for putting this together, I hadn’t find how to adjust for the router and location changes anywhere else.

Reply ↓
Michal Marek

2016-05-28 at 21:44

Thanks a lot, I can’t comprehend how the Angular team is unable to put up a simple guide on migration like this one.

Reply ↓
Luciano Lima

2016-05-29 at 05:54

Thanks for putting it all together man.
Had no trouble removing the Router-Deprecated from my project.

Reply ↓
Carl Fauteux

2016-05-29 at 17:24

Thanks for this stuff.
I was curious about a scenario that isn’t depicted here (nor anywhere it seems… or I can’t find…)

The multiple params sample you have is { path: ‘/gallery/:id/:image’, component: Gallery }, which seems to works fine with [‘gallery’, galleryId, image].

However, imagine that galery had 2 different routes, for ex:
{ path: ‘/gallery/:id/stats/:category, component: GalleryStats }
{ path: ‘/gallery/:id/images/:image’, component: GalleryImages }

With the deprecated router, these routes could be called using something like [‘GalleryStats’, galleryId, image] (assuming the route name was GalleryStats, same using GalleryImage).

Is something like that possible with the RC router? Should I refactor stuff to use nested routes so Gallery would only care about :id and subroutes would handle the 2nd parameter?

I couldn’t find any straight answer to that so I will probably head that way (nested routes), but I was curious if you encountered similar situation.

Thanks again!

Reply ↓
1. Christian Simon
  
  2016-05-29 at 17:46
  
  Hi Carl,
  
  Yes, it is possible to use routes with multiple fixed and variable segments in RC1.
  The trick is to enter all segments in the routerlink, not only the ones which are variable (while for the Beta router you would only enter the route alias and all variable parameters).
  In your example this would be:
  
  [routerlink]=”[‘gallery’, galleryId, ‘stats’, category]” and
  [routerlink]=”[‘gallery’, galleryId, ‘images’, image]”
  
  Reply ↓
vinicius

2016-06-01 at 19:53

Unfortunately, after substituting RouteParams (angular2) for RouteSegment (@angular). I keep getting the exception: ‘No provider for Router!’

Reply ↓
1. lindner Post author
  
  2016-06-02 at 09:06
  
  Hi vinicius,
  
  I can only guess here… did you add ROUTER_PROVIDERS during bootstrapping of you app?
  
  bootstrap(FacesApp, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  …
  ])
  .catch(err => console.error(err));
  
  Reply ↓
Donald

2016-07-02 at 15:06

Thank you for putting this together…. Did all kinds of searching in how to get a parameter using RC1 and resolved my issue with your info.

Reply ↓