Trường hợp là angular2-polyfills bây giờ mà non-beta Angular 2 được đóng gói dưới dạng @angular?

Question

Giờ đây Angular2 đã hết phiên bản beta (2.0.0-RC.0 và RC.1 ra mắt ngày hôm qua/ngày 3 tháng 5 năm 2016), tất cả Angular 2 được đóng gói để sử dụng với NPM theo không gian tên @angular mới. Rất nhiều gói đã được di chuyển và phải được cài đặt riêng lẻ ngay bây giờ, như bạn có thể thấy trong Angular2 CHANGELOG.

Nhưng một điều mà CHANGELOG không giải quyết là cách tìm gói angular2-polyfills đã có sẵn trước đó.

đang beta tôi gọi này trong một file nguyên cảo của nó:

import 'angular2/bundles/angular2-polyfills'; 

gì tôi cần phải làm bây giờ để nhận được rằng chức năng tương tự với cách bố trí gói mới?

Dưới đây là file ventdor.ts được sử dụng để nhập khẩu các polyfills để nó có thể được bao gồm bởi webpack:

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

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

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

Việc thiếu các polyfills gây ra lỗi như sau khi tôi xây dựng ứng dụng của tôi với 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

Như Thierry Templier nói trong câu trả lời của mình, vấn đề là zone.js và reflect-metadata phải được đưa vào ngay bây giờ khi gói angular2-polyfills.js không còn khả dụng nữa.

Để lấy lại chức năng, bạn cần phải nhập chúng trực tiếp thay vì dựa vào mã polyfills cũ.

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

Gói reflect-metadata đã có built-in typings cho nguyên cảo, vì vậy bạn có thể sử dụng import. Zone.js không, tuy nhiên, vì vậy bạn cần phải dựa vào require() để có được webpack để nhặt nó lên và bao gồm nó trong gói của bạn.

Tất nhiên bạn cũng cần phải có phản ánh và khu vực trong phần package.json phụ thuộc của bạn (tôi được liệt kê ở cuối, dưới đây):

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

Khi đã xong, bạn nên có một ứng dụng hoạt động trở lại (giả sử bạn đã chăm sóc trong những vấn đề khác có liên quan trong việc di chuyển từ Angular2 beta vào (release candidate) mã RC.

mã này là một ví dụ từ dự án angular2-bootstrap4-oauth2-webpack tôi trên Github.

Answer 2

Không còn tệp nào angular2-polyfills.js. Bạn cần phải bao gồm một cách rõ ràng ZoneJS và Reflect Metadata thư viện (FYI angular2-polyfill chứa hai thư viện này) Vì vậy, bạn cần phải bao gồm những điều sau đây:

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

Answer 3

Gần đây tôi có vấn đề này với rc.5 và giải quyết nó bằng cách nhập vùng như vậy:

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