Angular 6.0: What's New, Release History & Support Lifecycle

What Is New in Angular 6.0

Angular 6.0 is a major release focused on the toolchain and making it easier to move quickly with Angular in the future. This update brings the entire platform forward, including the core framework, Angular CLI, and Angular Material.

How does the new Angular CLI workspace model improve development?

The Angular CLI now uses a new workspace and library model with an angular.json file. This replaces the previous .angular-cli.json configuration. The new structure is designed to support multiple projects and libraries within a single workspace, which is a game-changer for monorepo development.

In practice, this means you can manage multiple applications and shareable libraries from one CLI context. The ng generate library command makes it straightforward to create and build reusable code. This matters because it streamlines the workflow for large-scale enterprise applications.

What are Angular Elements and why should I use them?

Angular Elements is a new feature that allows you to package Angular components as custom elements (web components). This lets you use Angular components in any HTML page, even non-Angular environments. It effectively bridges the gap between Angular and the native web platform.

You can create a component and use the createCustomElement() function to transform it into a standard custom element. This is powerful for incrementally upgrading legacy applications or embedding widgets into CMS-powered sites without a full framework bootstrapping process.

How does the RxJS 6 update affect my existing code?

Angular 6 now depends on RxJS 6, which introduced breaking changes to its import paths and API. The old way of importing from 'rxjs/Observable' is replaced by imports from 'rxjs'. Operators are now imported from 'rxjs/operators'.

To ease the migration, the RxJS team provides a backward-compatibility layer and a TSLint-enabled update tool. Running rxjs-5-to-6-migrate will automatically refactor most of your code. This change results in smaller application bundles and a more modular RxJS library.

What are tree-shakable providers and how do they work?

Tree-shakable providers are a new way to define services using the providedIn property. Instead of adding the service to a module's providers array, you now declare it directly in the @Injectable decorator.

@Injectable({
  providedIn: 'root'
})
export class MyService { }

This tells the Angular compiler that the service should be bundled only if it's actually used by the application. If nothing injects MyService, it gets dropped during the build process, leading to smaller final bundle sizes.