2016-05-04 11 views
23

Teraz, gdy Angular2 jest poza wersją beta (2.0.0-RC.0 i RC.1 zostały opublikowane wczoraj/3 maja 2016 r.), Cały Angular 2 jest spakowany do użytku z NPM w nowej przestrzeni nazw @angular. Wiele pakietów zostało przeniesionych i muszą być teraz indywidualnie zainstalowane, jak widać w Angular2 CHANGELOG.Gdzie są teraz elementy kątowe2-polyfills, które nie są dostępne w wersji beta Angular 2?

Jedną z rzeczy, których NIE STANOWI CHANGELOG jest znalezienie pakietu angular2-polyfills, który był wcześniej dostępny.

Mój kod beta nazwał to w jednym ze swoich plików maszynopis:

import 'angular2/bundles/angular2-polyfills'; 

Co muszę zrobić teraz, aby uzyskać tę samą funkcjonalność z nowym układzie pakietu?

Oto plik ventdor.ts że używany do importowania polyfills tak, że może być zawarte przez WebPacka:

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

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

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

na brak polyfills powoduje błędy takie jak następujące po buduję mój wniosek z WebPacka:

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

Odpowiedz

14

Jak Thierry Templier powiedział w swojej odpowiedzi, problem jest to, że zone.js i reflect-metadata należy teraz wprowadzić, ponieważ pakiet angular2-polyfills.js nie jest już dostępny.

Aby odzyskać funkcjonalność, należy zaimportować je bezpośrednio, zamiast polegać na starym kodzie do pisania.

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

Pakiet reflect-metadata już ma wbudowaną typowania dla maszynopis, dzięki czemu można używać import. Strefa.js nie musi jednak polegać na require(), aby uzyskać pakiet sieci Web do pobrania i dołączenia go do swoich pakietów.

Oczywiście trzeba także mieć odzwierciedlenia i strefa w sekcji package.json Zależności (kopalnia są wymienione na końcu, poniżej):

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

Gdy to zrobisz, powinieneś ponownie mają zastosowanie robocza (zakładając, że zadbał o innych kwestiach związanych z przejścia z Angular2 beta do RC (release Candidate) kodu.

Ten kod jest próbka z mojego angular2-bootstrap4-oauth2-webpack projektu na Github.

5

Nie ma więcej pliku angular2-polyfills.js. Trzeba to wyraźnie ZoneJS i odzwierciedlają biblioteki metadanych (FYI angular2-polyfill zawierał te dwie biblioteki) Więc trzeba zaliczyć:

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

Co najmniej w świecie pakietów internetowych, jest w tym coś więcej. Nie mogę po prostu wstawić tego do pliku index.html, ponieważ te pliki nie są tam dostępne. Webpack łączy wszystko w kilka plików, w tym przypadku nazywa się vendor.js. Pliki są dołączane tylko poprzez importowanie do jednego z plików najwyższego poziomu lub importowanie do pliku, który jest internowany importowany do pliku najwyższego poziomu (niewielkie uproszczenie). –

+0

Tak, masz rację w odniesieniu do pakietu internetowego. Myślę, że musisz zaimportować zależności zonejs i reflect-metadata zamiast angular2-polyfill. Przepraszam, nie wiem jak skonfigurować webpack ... –

3

niedawno miałem ten problem z rc.5 i rozwiązany przez importowanie strefy w ten sposób:

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