0

I tried to build my test app with tree shaking according to this post. http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

The build scripts runs OK but then I got runtime error when I used the 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 came 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)

This function originated from

  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)

when I use rollup to generate dist\bundle.es2015.js

If I build the app without tree shaking via browserify-js then this function appears as Observable_1.from() and the app works with no error.

I thought may be Angular2 zone.js is allergic to Observable$1 so I manually change all Observable$1 to Observable_1 in bundle.es2015.js and then run

"es5": "tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js",

Then I got this

  Unhandled Promise rejection: Observable_1.from is not a function ; 
  Zone: angular ; Task: Promise.then ; Value: TypeError: Observable_1.from is not a function(…)

Can anyone tell me if this is due to a rollup bug or I missed something?

Here is the build scripts

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

The rollup.config.js and tsconfig.json is the same as in the link above.

Shawn
  • 5,130
  • 13
  • 66
  • 109
  • 1
    I didn't have this exact problem in my builds, but I just updated my app to RC6, and my bundle basically started working, where it didn't work before. There is effort involved in updating (RC5 breaks a lot of stuff, and so does 6), but it's really where you want to be, since the API is now "stable". – trey-jones Sep 09 '16 at 13:09
  • Thank you threeve, it's good to know. – Shawn Sep 09 '16 at 20:53

0 Answers0