What Is New in Angular 4.0
| Category | Key Changes |
|---|---|
| New Features | ngIf with else, as keyword for ngIf, Angular Universal merges, TypeScript 2.1/2.2 compatibility |
| Performance | Reduced bundle size, Generated code improvements, View Engine optimizations |
| Breaking Changes | Strict null checking, Template tag changes, NgFor change |
| Deprecations | OpaqueToken, ngFor with comma-separated expression |
What are the major performance improvements in Angular 4.0?
The bundle size reduction is the headline performance win. The framework core is now significantly smaller, which directly improves application load times. This was achieved through extensive code refactoring and tree-shaking enhancements.
The new View Engine, dubbed "Generated code for AOT compilers," produces less code for generated components. In practice, this means your production bundles are more compact and efficient, leading to faster applications.
What new template syntax features were introduced?
Angular 4.0 enhances ngIf with an else clause, making conditional templates much cleaner. You can now define a template block to show when the condition is false.
<div *ngIf="user; else loggedOut">
Welcome, {{user.name}}.
</div>
<ng-template #loggedOut>
Please log in.
</ng-template>The as keyword is another addition, allowing you to store a conditional result as a local variable. This is great for avoiding redundant async pipe subscriptions like *ngIf="userObservable | async as user".
What breaking changes should developers watch for?
Angular now enforces stricter null checks. The Renderer class has been removed in favor of the more specific Renderer2, which is a breaking change for any code directly depending on the old renderer.
The template <template> tag is now deprecated. You should use <ng-template> instead. Similarly, the comma-separated expression in ngFor is deprecated; use the let syntax instead.
Before (Deprecated)
<div *ngFor="#item of items; #i = index"></div>After
<div *ngFor="let item of items; let i = index"></div>How has dependency injection evolved?
OpaqueToken is now deprecated. The modern replacement is InjectionToken, which supports generic types for better type safety across your application.
Before (Deprecated)
import { OpaqueToken } from '@angular/core';
export const MY_SERVICE = new OpaqueToken('my.service');After
import { InjectionToken } from '@angular/core';
export const MY_SERVICE = new InjectionToken<MyServiceType>('my.service');What about TypeScript and server-side rendering?
This release officially supports TypeScript 2.1 and 2.2. This matters because it unlocks newer TypeScript language features for your development, improving the overall coding experience.
Angular Universal, the project for server-side rendering, was merged into the main Angular repository. This signals a stronger commitment to Universal and makes it easier to keep it in sync with core framework changes.
FAQ
Is the switch from OpaqueToken to InjectionToken urgent?
It's a deprecation, not an immediate removal. You should plan to migrate for future-proofing and better type safety, but your existing code won't break in 4.0.
Why did my bundle size get smaller?
The Angular core team refactored the codebase to be more tree-shakable. The new View Engine also generates more efficient code during AOT compilation, stripping out unused parts more effectively.
What's the real benefit of the *ngIf else syntax?
It eliminates the need for dual *ngIf statements to show an alternative view. This makes your templates more declarative, readable, and easier to maintain.
I use the Renderer class--what should I do?
You need to migrate to Renderer2. It's the new API for DOM manipulation and is designed to be more future-proof. The change is required for upgrading.
Does this release improve change detection?
While not a headline feature, the underlying generated code from the View Engine is more optimized, which can contribute to marginally faster change detection cycles in your application.