Longing to know

Unless you don’t keep up with Angular development at all, you heard that Angular2 final was released last week. Yesterday, I had an opportunity to update my simple Visual Studio 2015 Basic Routing demo from RC4 to Final. There were breaking changes that had to be resolved.

More or less, here’s a breakdown summary of the things I had to change. You can also see this in my Github change history.

To get the latest libraries, these imports were updated in the package.json’s dependencies:

"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"core-js": "2.4.1",
"reflect-metadata": "0.1.8",
"systemjs": "0.19.38",
"zone.js": "0.6.23"

After bringing in those libraries, I also changed my application naming conventions (app.module.ts, app.component.ts, app.routing.ts, etc) to more closely match accepted conventions.

Since I’m still transpiling to ES5, I did not change any of my configuration for the “typings” postinstall options.

Routing and bootstrapping are different. Some of the objects that were present in RC4 like {ROUTER_DIRECTIVES} in @angular/router are gone. These were the biggest changes for me.

Looking at the bootstrapping changes, previously you would create a main entry point (main.ts) and routes (routes.ts), and import those. Then, you would export and bootstrap “main” with the routes as a dependency. Now, though, you have to bootstrap a “module.” The NgModule that you wish to bootstrap has to be defined with specific properties indicating dependencies and routing. An example is below of my “app.module.ts” which I export as “AppModule.” You can see that I’m importing all necessary components and my routing and assign these to the properties needed for the module definition.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }   from './app.component';
import { ContactComponent }  from './contact.component';
import { HomeComponent }  from './home.component';
import { AboutComponent }  from './about.component';

import { routing } from './app.routing';

@NgModule({
    imports: [BrowserModule, FormsModule, routing],
    declarations: [AppComponent, AboutComponent, ContactComponent, HomeComponent],
    exports: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

The routing definition isn’t terribly different except for the imports that are used and the way the routes are exported. Notice how the Routes/RouterModule are now imported and how the routes are actually exported as a Module with “ModuleWithProviders.”

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent }  from './contact.component';
import { HomeComponent }  from './home.component';
import { AboutComponent }  from './about.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent }
];

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

With the app.routing.ts and app.module.ts configured, bootstrapping is performed in main.ts relative to those modules.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The bootstrapping is more concise due to separation of concerns. Our main.ts is only bootstrapping. Dependencies all were defined in our modules.

Those were the predominant breaking changes that stood out for me while I was updating the project. Feel free to grab the source from Github and check it out.