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