Angular 4

Angular 4.0- invisible-makeover – is now released and is not only smaller & faster, but also has an improved *ngIf and *ngFor, source maps for templates, and more.

*ngIf and *ngFor

The template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable:

<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">

<div>{{count}} total users</div>


<ng-template #loading>Loading...</ng-template>

TypeScript 2.1 and 2.2 compatibility

Angular is updated to a more recent version of TypeScript. This will improve the speed of ngc and you will get better type checking throughout your application.

Source Maps for Templates

Now when there is an error caused by something in one of your templates, it includes generated source maps that give a meaningful context in terms of the original template.

View Engine

Made changes under to hood to what AOT generated code looks like. These changes reduce the size of the generated code for components by around 60%  in most cases. The more complex templates are, the higher the savings.

During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes.

Read the Design Doc to learn more about what we did with the View Engine.

Animation Package

Pulled animations out of @angular/core and into their own package. This means that if app don’t use animations, this extra code will not end up in production bundles.

This change also allows to more easily find documentation and to take better advantage of autocompletion. Now it’s possible to add animations to main NgModule by importing.

Updating to 4.0.0

Updating to 4 is as easy as updating Angular dependencies to the latest version, and double checking if app wants animations. This will work for most use cases.

On Linux/Mac:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save

On Windows:
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save

Then run whatever ng serve or npm start command you normally use, and everything should work.
If app needs Animations, import the new BrowserAnimationsModule from @angular/platform-browser/animations in root NgModule. Without this, code will compile and run, but animations will trigger an error. Imports from @angular/core were deprecated, use imports from the new package import { trigger, state, style, transition, animate } from ‘@angular/animations’;.

For complete details on this release check out the Angular site and the announcement blog post.

For those wondering what happened to Angular 3 it was skipped over and you can see this talk from December when they announced this:

Similar Posts