├── .gitignore ├── README.md ├── app ├── app.component.ts ├── app.module.ts └── main.ts ├── compiled └── main-prod.ts ├── index.html ├── package.json ├── rollup.config.js ├── tsconfig-tsc.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | typings 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to use? 2 | 3 | **Updated to Angular final!** 4 | 5 | ```bash 6 | npm i 7 | npm run build_prod 8 | npm run http-server 9 | ``` 10 | 11 | For production usage, I'd recommend you to take a look at [this starter project](https://github.com/mgechev/angular-seed). 12 | 13 | For further information take a look at [this blog post](http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/). 14 | 15 | # License 16 | 17 | MIT 18 | 19 | -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: 'Hello world!' 6 | }) 7 | export class AppComponent {} 8 | 9 | -------------------------------------------------------------------------------- /app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | imports: [BrowserModule], 8 | bootstrap: [AppComponent], 9 | declarations: [AppComponent], 10 | }) 11 | export class AppModule {} 12 | 13 | -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | platformBrowserDynamic().bootstrapModule(AppModule); 5 | 6 | -------------------------------------------------------------------------------- /compiled/main-prod.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowser } from '@angular/platform-browser'; 3 | 4 | import { AppModuleNgFactory } from './app.module.ngfactory'; 5 | 6 | enableProdMode(); 7 | 8 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 9 | 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-min", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "clean": "rm -rf dist && rm -rf app/*.ngfactory.ts && cd compiled && find . ! -name 'main-prod.ts' -type f -exec rm -f {} + && cd ..", 8 | "serve": "http-server . -p 5557", 9 | "ngc": "ngc -p tsconfig.json && cp app/* compiled", 10 | "build": "tsc -p tsconfig-tsc.json", 11 | "rollup": "rollup -f iife -c rollup.config.js -o dist/bundle.es2015.js", 12 | "es5": "tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js", 13 | "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js", 14 | "build_prod": "npm run clean && npm run ngc && npm run build && npm run rollup && npm run es5 && npm run minify" 15 | }, 16 | "author": "Minko Gechev ", 17 | "license": "MIT", 18 | "devDependencies": { 19 | "@angular/compiler-cli": "^2.1.0", 20 | "@angular/platform-server": "^2.1.0", 21 | "@types/core-js": "^0.9.34", 22 | "browserify": "^13.0.1", 23 | "http-server": "^0.9.0", 24 | "rollup": "^0.36.3", 25 | "rollup-plugin-node-resolve": "^2.0.0", 26 | "typescript": "^2.0.3", 27 | "uglifyjs": "^2.4.10" 28 | }, 29 | "dependencies": { 30 | "@angular/common": "^2.1.0", 31 | "@angular/compiler": "^2.1.0", 32 | "@angular/core": "^2.1.0", 33 | "@angular/platform-browser": "^2.1.0", 34 | "@angular/platform-browser-dynamic": "^2.1.0", 35 | "es6-shim": "^0.35.1", 36 | "reflect-metadata": "^0.1.3", 37 | "rxjs": "5.0.0-beta.12", 38 | "rxjs-es": "5.0.0-beta.12", 39 | "systemjs": "^0.19.31", 40 | "zone.js": "^0.6.25" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import nodeResolve from 'rollup-plugin-node-resolve'; 2 | 3 | class RollupNG2 { 4 | resolveId(id, from) { 5 | if (id.startsWith('rxjs/')) { 6 | return `${__dirname}/node_modules/rxjs-es/${id.replace('rxjs/', '')}.js`; 7 | } 8 | return undefined; 9 | } 10 | } 11 | 12 | const rollupNG2 = () => new RollupNG2(); 13 | 14 | export default { 15 | entry: 'dist/main-prod.js', 16 | sourceMap: true, 17 | treeshake: true, 18 | moduleName: 'main', 19 | plugins: [ 20 | rollupNG2(), 21 | nodeResolve({ 22 | jsnext: true, main: true, module: true 23 | }) 24 | ] 25 | }; 26 | 27 | 28 | -------------------------------------------------------------------------------- /tsconfig-tsc.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "removeComments": true, 8 | "noLib": false, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "lib": ["es6", "es2015", "dom"], 12 | "sourceMap": true, 13 | "pretty": true, 14 | "allowUnreachableCode": false, 15 | "allowUnusedLabels": false, 16 | "noImplicitAny": true, 17 | "noImplicitReturns": true, 18 | "noImplicitUseStrict": false, 19 | "noFallthroughCasesInSwitch": true, 20 | "outDir": "./dist", 21 | "typeRoots": [ 22 | "./node_modules/@types", 23 | "./node_modules" 24 | ], 25 | "types": [ 26 | ] 27 | }, 28 | "files": [ 29 | "compiled/main-prod.ts" 30 | ], 31 | "exclude": [ 32 | "node_modules", 33 | "dist", 34 | "src" 35 | ], 36 | "compileOnSave": false 37 | } 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "removeComments": true, 8 | "noLib": false, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "lib": ["es6", "es2015", "dom"], 12 | "sourceMap": true, 13 | "pretty": true, 14 | "allowUnreachableCode": false, 15 | "allowUnusedLabels": false, 16 | "noImplicitAny": true, 17 | "noImplicitReturns": true, 18 | "noImplicitUseStrict": false, 19 | "noFallthroughCasesInSwitch": true, 20 | "outDir": "./dist", 21 | "typeRoots": [ 22 | "./node_modules/@types", 23 | "./node_modules" 24 | ], 25 | "types": [ 26 | ] 27 | }, 28 | "files": [ 29 | "app/main.ts" 30 | ], 31 | "exclude": [ 32 | "node_modules", 33 | "dist", 34 | "src" 35 | ], 36 | "compileOnSave": false 37 | } 38 | --------------------------------------------------------------------------------