Where is angular2-polyfills now that non-beta Angular 2 is packaged as @angular?

Question

Now that Angular2 is out of beta (2.0.0-RC.0 and RC.1 came out yesterday/May 3, 2016), all of Angular 2 is packaged for use with NPM under the new @angular namespace. A lot of

Answer 1

There is no more angular2-polyfills.js file. You need to include explicitly ZoneJS and Reflect Metadata libraries (FYI angular2-polyfill contained these two libraries) So you need to include the following:

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

Answer 2

As Thierry Templier said in his answer, the issue is that zone.js and reflect-metadata have to be brought in now that the angular2-polyfills.js bundle is no longer available.

To get the functionality back, you need to import them directly instead of relying on the old polyfills code.

//import 'angular2/bundles/angular2-polyfills'; // no longer available
import 'reflect-metadata';
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone'); // for development only - not needed for prod deployment

The reflect-metadata package already has built-in typings for TypeScript, so you can use import. Zone.js does not, however, so you need to rely on require() to get webpack to pick it up and include it in your bundles.

Of course you also need to have reflect and zone in your package.json dependencies section (mine are listed at the end, below):

{
  "name": "angular2-bootstrap4-oauth2-ohmy",
  "version": "1.0.8",
  "description": "A skeleton Angular2, Bootstrap 4, OAuth2 application using webpack (oh my!)",
  "repository": "https://github.com/michaeloryl/angular2-bootstrap4-oauth2-webpack.git",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular/router-deprecated": "^2.0.0-rc.1",
    "bootstrap": "4.0.0-alpha.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "lodash": "^4.11.2",
    "phantomjs-prebuilt": "^2.1.7",
    "require": "^2.4.20",
    "rxjs": "^5.0.0-beta.6",
    "traceur": "0.0.93",
    "reflect-metadata": "^0.1.2",
    "zone.js": "^0.6.12"
  },
}

Once that is done, you should have a working application again (assuming you took care of the other issues involved in moving from Angular2 beta to the RC (release candidate) code.

This code is a sample from my angular2-bootstrap4-oauth2-webpack project on Github.

Answer 3

I recently had this issue with rc.5 and solved it by importing zone like so:

// import 'angular2/bundles/angular2-polyfills'; // old
import 'reflect-metadata';
import 'zone.js/dist/zone'; 
import 'zone.js/dist/long-stack-trace-zone';