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.