0

この投稿に従って、ツリーシェイクでテストアプリを構築しようとしました。 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 は、上記のリンクと同じです。

4

0 に答える 0