2016-05-04 5 views
23

Angular2がベータ(2.0.0-RC.0、RC.1は昨日/ 2016年5月3日にリリースされました)では、Angular 2はすべて、新しい@angular名前空間でNPMで使用するためにパッケージ化されています。 Angular2 CHANGELOGに示すように、多くのパッケージが移動され、個別にインストールする必要があります。ここで、angular2-polyfillsはnon-beta Angular 2が@angularとしてパッケージされていますか?

しかし、CHANGELOGが対処していないことの1つは、以前利用可能だったangular2-polyfillsバンドルを見つける方法です。その活字ファイルのいずれかでこれを呼ば

マイベータコード:

import 'angular2/bundles/angular2-polyfills'; 

私は新しいパッケージのレイアウトと同じ機能を取得するために今何が必要ですか?

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

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

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

私はWebPACKのと自分のアプリケーションをビルドするときpolyfillsの欠如は、以下のようなエラーが発生します:

ここ

は、WebPACKので含めることができるようにpolyfillsをインポートするために使用さventdor.tsファイルがあります

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

答えて

14

ティエリーTEMPLIERは、問題はそのzone.jsreflect-metadataで、彼の答えで述べたようにangular2-polyfills.jsのバンドルが利用できなくなった今、持ち込む必要があります。

機能を元に戻すには、古いポリフィルコードに頼るのではなく、直接インポートする必要があります。

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

reflect-metadataパッケージがすでに活字体のためのタイピングを内蔵しているので、あなたはimportを使用することができます。しかし、Zone.jsはありませんので、ウェブパックを受け取ってバンドルに入れるにはrequire()に頼る必要があります。あなたも(以下、鉱山は末尾に記載されている)あなたのpackage.jsonの依存関係のセクションに反映し、ゾーン持っている必要があります。もちろん、

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

をそれが完了したら、あなたは(再び動作するアプリケーションを持っている必要がありますあなたはRC(リリース候補)コードにAngular2ベータからの移動に関与する他の問題の世話をしたと仮定。

このコードはGitHubの上で私のangular2-bootstrap4-oauth2-webpackプロジェクトからのサンプルである。

5

angular2-polyfills.jsファイルはありません。明示的ZoneJSを含めるとメタデータライブラリを反映する必要があります(FYI angular2-ポリフィルは、これら2つのライブラリが含まれて)だから、以下を含める必要があります。

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

少なくともウェブパックの世界では、これ以上のことがあります。これらのファイルは利用できないため、index.htmlに入れることはできません。 Webpackはすべてをまとめていくつかのファイルにしています。この特定のケースではvendor.jsと呼ばれています。ファイルは、トップレベルのファイルの1つにインポートされるか、またはトップレベルのファイルにインポートされたファイルにインポートされることによって組み込まれます(それを単純化します)。 –

+0

はい、あなたはウェブパックに関して正しいです。私は、angle2-polyfillの代わりにzonejsとreflect-metadataの依存関係をインポートする必要があると思います。申し訳ありませんが、webpackの設定方法はわかりません... –

3

私は最近、この問題を持っていましたrc.5でゾーンをインポートして解決しました。

// import 'angular2/bundles/angular2-polyfills'; // old 
import 'reflect-metadata'; 
import 'zone.js/dist/zone'; 
import 'zone.js/dist/long-stack-trace-zone'; 
関連する問題