2016-05-04 7 views
23

Jetzt, da Angular2 nicht mehr in der Betaversion ist (2.0.0-RC.0 und RC.1 kam gestern/3. Mai 2016 heraus), ist Angular 2 für die Verwendung mit NPM unter dem neuen @angular Namespace gepackt. Viele Pakete wurden verschoben und müssen jetzt einzeln installiert werden, wie Sie in der Angular2 CHANGELOG sehen können.Wo ist eckig2-Polyfills jetzt, dass nicht-Beta-Angular 2 als @angular verpackt ist?

Aber eine Sache, die der CHANGELOG nicht adressiert, ist, wie man das angular2-polyfills Bündel findet, das vorher verfügbar war.

Mein Beta-Code dies in einem seiner Typoskript Dateien genannt:

import 'angular2/bundles/angular2-polyfills'; 

Was muss ich jetzt tun, dass die gleiche Funktionalität mit dem neuen Paket Layout zu bekommen?

Hier ist die ventdor.ts Datei, die den polyfills importieren verwendet, so dass es durch webpack aufgenommen werden könnte:

require('./css/bootstrap.css'); 
require('./css/main.css'); 

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

require('./lib/bootstrap/bootstrap.js'); 

Das Fehlen des polyfills verursacht Fehler wie die folgenden, wenn ich meine Anwendung mit webpack bauen:

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

Antwort

14

Wie Thierry Templier sagte in seiner Antwort, ist die Frage, dass zone.js und reflect-metadata müssen jetzt hereingebracht werden, dass das Bundle nicht mehr verfügbar ist.

Um die Funktionalität zurück zu erhalten, müssen Sie sie direkt importieren, anstatt sich auf den alten Polyfill-Code zu verlassen.

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

Das reflect-metadata Paket bereits hat eingebaute Typisierungen für Typoskript, so können Sie import verwenden. Zone.js jedoch nicht, so dass Sie sich auf require() verlassen müssen, damit das Webpack es abholen und in Ihre Bundles aufnehmen kann.

Natürlich können Sie auch in Ihrem package.json Abhängigkeiten Abschnitt zu reflektieren und Zone haben müssen (Mine am Ende aufgeführt sind, unten):

{ 
    "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" 
    }, 
} 

Sobald dies geschehen ist, sollten Sie wieder eine funktionierende Anwendung haben (bei der Bewegung von Angular2 beta auf den RC (Release Candidate) Code.

Dieser Code ist ein Beispiel aus meinem angular2-bootstrap4-oauth2-webpack Projekt auf Github.

5

Es gibt keine angular2-polyfills.js Datei mehr. Sie müssen explizit ZoneJS enthalten und Metadaten Bibliotheken Reflect (FYI angular2-polyfill diese beiden Bibliotheken enthalten) Sie müssen also, schließen Folgendes ein:

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

Zumindest in der Webpack-Welt gibt es mehr als das. Ich kann es nicht einfach in index.html einfügen, weil diese Dateien dort nicht verfügbar sind. Webpack fasst alles in ein paar Dateien zusammen, in diesem Fall Vendor.js. Dateien werden nur aufgenommen, wenn sie in eine der Top-Level-Dateien importiert oder in eine Datei importiert werden, die intern in eine Top-Level-Datei importiert wird (geringfügige Vereinfachung). –

+0

Ja, Sie haben Recht bezüglich des Webpacks. Ich denke, dass Sie die Abhängigkeiten von zonejs und reflect-metadata anstelle von angular2-polyfill importieren müssen. Tut mir leid, ich weiß nicht wirklich, wie man das Webpack konfiguriert ... –

3

Vor kurzem hatte ich dieses Problem beteiligt vorausgesetzt, Sie kümmern sich um die anderen Probleme haben mit rc.5 und löste es durch Importieren der Zone wie folgt:

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