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 packages have been moved and must be individually installed now, as you can see in the Angular2 CHANGELOG.

But one thing that the CHANGELOG doesn't address is how to find the angular2-polyfills bundle that was available previously.

My beta code called this in one of its TypeScript files:

import 'angular2/bundles/angular2-polyfills'; 

What do I need to do now to get that same functionality with the new package layout?

Here is the ventdor.ts file that used to import the polyfills so that it could be included by webpack:

require('./css/bootstrap.css'); require('./css/main.css');  import 'angular2/bundles/angular2-polyfills'; // THIS NO LONGER WORKS  require('./lib/bootstrap/bootstrap.js'); 

The lack of the polyfills causes errors like the following when I build my application with webpack:

ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/async.d.ts (28,45): error TS2304: Cannot find name 'Promise'.  ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/lang.d.ts (4,17): error TS2304: Cannot find name 'Map'.  ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/lang.d.ts (5,17): error TS2304: Cannot find name 'Set'. 

Answer 1

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 2

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>