Angular JS 4


What’s New in Angular JS 4

Smaller and Faster

Angular JS blog state that they delivered their our promise to make Angular applications smaller and faster in Angular JS 4. Also, they added a note they have not done yet on this and we will see further improvements in the coming months.

View Engine

The Angular JS blog states that they have made changes under the hood to what AOT generated code looks like. These changes reduce the size of the generated code for your components by around 60%  in most cases. Also they claim that many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes.

Read their Design Doc to check out more on what they have done with the View Engine.

Separate Animation Package

A separate package is added for animations, buy pulling it out from @angular/core. So, no need to load this extra bundle in your application if you do not use animations.

New Features
  • Improved *ngIf and *ngFor
  • Angular Universal, which helps run Angular on a server is updated. To learn more about taking advantage of Angular Universal, take a look at the new renderModuleFactory.
  • Improved TypeScript 2.1 and 2.2 compatibility
  • Source Maps for Templates
Packaging Changes
  • Package using Flat ES Modules (Flat ESM / FESM)
  • Packages are now available in Experimental ES2015 Builds.
  • All of Angualr JS 4 code now has Closure annotations.

Updating to 4.0.0

In Angular JS 4 words, how to update to Angular JS 4:

Updating to 4 is as easy as updating your Angular dependencies to the latest version, and double checking if you want 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 you rely on Animations, import the new BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule. Without this, your 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’;.


Angular is even getting ready to release the next version 4.1 in the coming 6 months. So, gear up and install Angular JS 4. For more details on the new version have a look at the official blog post of this Angular JS 4.

Share it with your friends now!

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *