Tel Map

Blog

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

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

package.json

Angular2 rc1 Bootstrapping

The imports for bootstrapping an angular2 application have changed from:

to

Routes

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

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

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:

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.

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

Checking for Route Parameters

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

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.

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:

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

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 Antworten auf „Angular2 Release Candidate 1 (RC1) Changes“

  1. Carl Fauteux

    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!

    1. 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]“

  2. vinicius

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

    1. lindner Post Autor

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert