Angular 2 RC5 was released a couple days ago. This RC5 version brings Angular 2 one step closer to its final release, as the Angular team stated in its announcement:
“RC5 represents our expected public API for our 2.0.0 release, including router and forms APIs”
That’s great news as it basically means that 2.0.0 is closer than ever. It also means that if there’s a RC6 in the future, it should not have any breaking changes.
Let’s take a quick look at what’s new in RC5:
NgModule
NgModule does not sound that exciting but it is! It’s a new decorator that looks like this:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, RouterModule],
bootstrap: [AppComponent],
})
export class AppModule {}
If you’re not excited yet, I can understand that. Now if you’re written a little bit of Angular 2 code before RC5, you know that you had to list all of your dependencies with import statements and directive attributes in your components as follows:
import { Component } from '@angular/core';
import { HelloWorld2 } from './helloWorld2.component';
@Component({
moduleId: module.id,
selector: 'app-communication2',
directives: [HelloWorld2],
pipes: [ MyMagicPipe ]
template: `<hello-world2 [message]="myMessage" (onClick)="myCallback($event)"></hello-world2>`
})
With NgModule, all of the repetitive boilerplate code used by most of your components / pipes/ services can be listed once for all in your NgModule declaration. Once you’ve done that, you can get rid of the directives declaration in your components (and you should – it will be removed from Angular 2.0.0 thus becoming a breaking change at that point).
NgModule is also the decorator we will now use to specify which component is the root component to bootstrap. A nice addition to Angular 2!
FormsModule, RouterModule, and Material Design modules
The Angular team already created a bunch of commonly used modules with NgModule so that we can import them easily. Another nice syntax shortcut added to Angular RC5.
Lazy-loading and Ahead-of-Time compilation
60% of Angular 2’s code size is the compiler. With Ahead-of-time compilation (AoT), Angular 2 can now be used without compiling your components / templates on the fly.
As a result, users should be able to see decreased start-up time for your app as the compilation work will laready be done when the page is loaded.
Also, we can expect the Angular 2 “runtime” dependency to be 60% smaller as a result, which would result in a faster download as well.
Lazy-loading is another option to make things happen faster, as you can now specify lazy pahts in the router that will load specific modules only when requested by the user:
@NgModule({
declarations: [ MyComponent, MyHomeRoute ],
bootstrap: [ MyComponent ],
imports: [
RouterModule.forRoot([
{ path: ‘home’, component: MyHomeRoute },
{ path: ‘lazy’, loadChildren: ‘./my-lazy-module’ }
])
})
class MyAppModule {}
All in all, no revolution with Angular 2 RC5, yet some good news that allow us to believe that the final release is getting closer and closer!
