Wednesday, August 3, 2016

Upgrading Angular 2 from beta 17 to RC4–Lessons learned Part 1

Last week I had to make a change to an existing Angular 2 codebase(written using Angular 2 Beta 17). Before applying the change I decided to (quickly) update the code to Angular 2 RC4. Turns out that quickly wasn’t so quick after all… A lot of things have changed between the beta and RC.

Here are some of the lessons I learned along the way:

NPM packages

The NPM packages have been renamed and do no longer contain Angular2 in their name. Instead they switched to @angular.

Here is my updated package.json:

Of course I had to update the imports inside my components as well:

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES} from '@angular/router'
import {HTTP_PROVIDERS}    from '@angular/http';

System.config changes

After updating my NPM references, I got another error:

Error: SyntaxError: Unexpected token <(…)

Angular was no longer able to load my scripts. When I took a look at the network tab in the browser I noticed that the wrong URL was used. I had to update my system.config to fix this:

 

https://www.towfeek.se/2016/05/upgrading-to-angular-2-rc1-from-beta-lessons-learned/

https://angular.io/docs/ts/latest/guide/router.html

New script references

Now that the NPM packages were imported correctly, I had good hope that everything would work. But no, a new error appeared:

Reflect.getOwnMetadata is not a function

Some new scripts had to be referenced that were not required before. So I updated my script references and added the following:

We finally started to make some progress, next issue is tackling the new router. But that is for another blog post.

No comments: