Angular 2 RC6

Angular 2.0.0-rc.6 is now available on npm! New in this release candidate:

• Faster Angular 2 through Ahead of Time (AoT) compilation improvements and ES6 2015 modules. 
• More features in Forms:  resetForm, disabled state, validator directive binding, group rebinding, and other improvements.
• Internationalization (i18n) support. Add an i18n attribute, then use the ng-xi18n tool to extract strings to a standard XLIFF file. See this example to try it out.

The API surface is now final for all stable API symbols. This also means that previously deprecated APIs are removed in RC6.

For full details, see the CHANGELOG.md.

Faster Angular 2

Ahead of Time (AoT) Compilation

We’re really excited about the speed and bundle size improvements developers get when compiling applications ahead of time.  To take advantage of AoT compilation, you’ll need to install the @angular/compiler-cli and make a small addition to your tsconfig.json file.

  "angularCompilerOptions": {
    "genDir": "./ngfactory"
  }

Once you make this change, you can run the Angular compiler from the command-line, by typing ngc.

Then update your bootstrap from

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(MyAppModule)

to

import {platformBrowser} from '@angular/platform-browser';
platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory)

These two changes will get you started with using ngc and AoT, but we have more documentation and tools coming. Developers looking to try AoT may run into errors the first time they try - don’t panic! One of the benefits of the introduction of NgModules is that your code does not have to change based on whether you’re running in AoT or just in time (JiT) mode, so you can continue to be productive while we continue to improve these tools and work with third-party library authors to make sure code is AoT compilable.

ES2015 modules

In RC6, we’ve changed the output structure of our NPM packages to better enable tools like Rollup and Webpack2 to optimize your applications during bundling.

Each @angular/* package now contains:

• “ESM” code - this is ES5 code with ES2015 style import/exports. This works great with Rollup and Webpack2 and allows more efficient tree shaking. This code replaces the commonJS source in the root of each directory.
• A UMD bundle in the bundles/ directory of each package.
• A new field in the package.json - “module” - that allows Rollup and Webpack to opt into using the ESM code.

For most users, this should work with no changes - but in case of any issues, here’s a list of config setups for various tooling: https://gist.github.com/robwormald/29f3dcda1a06b955d83fccb2a94586eb

If you’ve previously deep imported from @angular packages (e.g. @angular/core/src/foo/bar), note that this no longer works in RC6. Always import from the root of a package (eg, @angular/core). Deep imports are private APIs, and likely to change.