この投稿に従って、ツリーシェイクでテストアプリを構築しようとしました。 http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
ビルド スクリプトは正常に実行されますが、bundle.js を使用するとランタイム エラーが発生します。
zone.js@0.6.12?main=browser:461 Unhandled Promise rejection: Observable$1.from is not a function ;
Zone: angular ; Task: Promise.then ; Value: TypeError: Observable$1.from is not a function(…)
Observable$1.from は dist\bundle.es2015.js から来ました
dist\bundle.es2015.js 48604 return Observable$1.from(this.checks)
dist\bundle.es2015.js 48624 return Observable$1.from(this.checks)
dist\bundle.es2015.js 48697 return Observable$1.from(canActivate)
dist\bundle.es2015.js 48714 return Observable$1.from(canDeactivate)
この機能の元になったのは
node_modules\@angular\router\esm\src\router.js 361 return Observable.from(this.checks)
node_modules\@angular\router\esm\src\router.js 381 return Observable.from(this.checks)
node_modules\@angular\router\esm\src\router.js 454 return Observable.from(canActivate)
node_modules\@angular\router\esm\src\router.js 471 return Observable.from(canDeactivate)
ロールアップを使用して dist\bundle.es2015.js を生成すると
browserify-js を使用してツリー シェーキングを行わずにアプリをビルドすると、この関数は Observable_1.from() として表示され、アプリはエラーなしで動作します。
Angular2 zone.js は Observable$1 にアレルギーがあるのではないかと考えたので、bundle.es2015.js ですべての Observable$1 を手動で Observable_1 に変更してから実行します
"es5": "tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js",
それから私はこれを手に入れました
Unhandled Promise rejection: Observable_1.from is not a function ;
Zone: angular ; Task: Promise.then ; Value: TypeError: Observable_1.from is not a function(…)
これがロールアップのバグによるものなのか、それとも私が何かを見逃したのか、誰か教えてもらえますか?
ここにビルドスクリプトがあります
"scripts": {
"clean": "rm -rf dist",
"typings": "typings install",
"serve": "http-server . -p 5557",
"postinstall": "npm run typings",
"build": "tsc -p tsconfig.json",
"rollup": "rollup -f iife -c -o dist/bundle.es2015.js",
"es5": "tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
"build_prod": "npm run clean && npm run build && npm run rollup && npm run es5 && npm run minify"
}
rollup.config.js と tsconfig.json は、上記のリンクと同じです。