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.