MichaelOryl MichaelOryl - 1 year ago 123
TypeScript Question

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

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

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
file that used to import the polyfills so that it could be included by webpack:


import 'angular2/bundles/angular2-polyfills'; // THIS NO LONGER WORKS


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 Source

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/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.