Angular 2 – What changed with Angular 4?

Backward compatibility

Angular 4 is NOT a complete re-write of Angular 2, indeed, it shouldn’t introduce any breaking changes. Some features will be deprecated (i.e. they still work but will get replaced with the next major Angular version), some new features were added.

Regarding your old code all will continue to work.

 Changes

  • ng-if with else

// Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<template #elseBlock>Falsy condition</template>
  • A new Renderer: Renderer2

Just make sure to check import and dependency injections with Rendere2 instead of Renderer

  • Email validator with email directive

Angular 4 has a built-in “email” validation tag that can be added within the input. E.g.:

<input type="email" id="contactemail" email>

Under the hood improvements:

  • Typecript 2.2

Check https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html

  • Flat ES Modules (Flat ESM / FESM)

    We now ship flattened versions of our modules (“rolled up” version of our code in the EcmaScript Module format, see example file). This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.
     
    Read more about the importance of Flat ES Modules in “The cost of small modules”.

Deprecations

  • Renderer v1
  • Angular animation package from core –> now will import from angular/animations