├── .gitignore ├── .npmignore ├── README.md ├── components.d.ts ├── components.js ├── examples ├── systemjs │ ├── index.html │ ├── package.json │ └── src │ │ ├── App.ts │ │ └── tsconfig.json └── webpack │ ├── package.json │ ├── src │ ├── app.ts │ └── index.html │ ├── tsconfig.json │ └── webpack.config.js ├── package.json └── src ├── HelloWorld.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules 3 | jspm_packages 4 | .idea 5 | lib 6 | build 7 | 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples 2 | node_modules 3 | src 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Learn how to create an Angular 2 Library 3 | 4 | An example repository for learning how to build your own Angular 2 library. Learn how to: 5 | 6 | - setup the library public API 7 | - build the library 8 | - version it 9 | - publish it to npm 10 | - package the CSS 11 | - consume the library with SystemJs or Webpack 12 | 13 | See further details in this blog post: 14 | [How to create an Angular 2 component library, and how to consume it using SystemJs or Webpack ](http://blog.jhades.org/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/) 15 | 16 | # Installation 17 | 18 | Clone the repository and do: 19 | 20 | npm install 21 | 22 | # Building the library 23 | 24 | npm run build 25 | 26 | ## Install the SystemJs Example 27 | 28 | cd examples/systemjs 29 | npm install 30 | npm run build 31 | npm start 32 | 33 | Then access [http://localhost:8080](http://localhost:8080) 34 | 35 | ## Install the Webpack Example 36 | 37 | cd examples/webpack 38 | npm install 39 | npm start 40 | 41 | Then access [http://localhost:8080](http://localhost:8080) 42 | -------------------------------------------------------------------------------- /components.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/HelloWorld'; -------------------------------------------------------------------------------- /components.js: -------------------------------------------------------------------------------- 1 | exports.HelloWorld = require('./lib/HelloWorld').HelloWorld; 2 | -------------------------------------------------------------------------------- /examples/systemjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Example TODO Application using the ng2-store 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 64 | 65 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/systemjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "watch": "rm -rf build && mkdir build && tsc -p src -w", 8 | "build": "rm -rf build && mkdir build && tsc -p src || true", 9 | "start": "http-server -c-1 ." 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "typescript": "^1.7.5" 15 | }, 16 | "dependencies": { 17 | "http-server": "^0.8.5", 18 | "systemjs": "^0.19.9", 19 | "@angular/common": "2.0.0-rc.1", 20 | "@angular/compiler": "2.0.0-rc.1", 21 | "@angular/core": "2.0.0-rc.1", 22 | "@angular/http": "2.0.0-rc.1", 23 | "@angular/platform-browser": "2.0.0-rc.1", 24 | "@angular/platform-browser-dynamic": "2.0.0-rc.1", 25 | "rxjs": "5.0.0-beta.6", 26 | "zone.js":"^0.6.12", 27 | "angular2-library-example": "^1.0.6", 28 | "es6-promise": "^3.0.2", 29 | "core-js": "^2.4.0", 30 | "reflect-metadata": "0.1.2", 31 | "ts-loader": "^0.8.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/systemjs/src/App.ts: -------------------------------------------------------------------------------- 1 | 2 | import {Component} from '@angular/core'; 3 | import {bootstrap} from '@angular/platform-browser-dynamic'; 4 | import {HelloWorld} from 'angular2-library-example/components'; 5 | 6 | 7 | @Component({ 8 | selector: 'app', 9 | directives: [HelloWorld], 10 | template: ` 11 | {{message}} 12 | 13 | ` 14 | }) 15 | export class App { 16 | 17 | message = ""; 18 | 19 | onKeyUp(input) { 20 | this.message = input.value; 21 | } 22 | 23 | } 24 | 25 | bootstrap(App); 26 | -------------------------------------------------------------------------------- /examples/systemjs/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "target": "es6", 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "removeComments": true, 9 | "sourceMap": true, 10 | "outDir": "../build" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng2-webpack-minimal", 3 | "version": "1.0.0", 4 | "description": "A minimal Webpack-based Angular 2 seed project", 5 | "scripts": { 6 | "start": "webpack-dev-server --colors --display-error-details --content-base src" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/jhades/ng2-webpack-minimal.git" 11 | }, 12 | "keywords": [ 13 | "Angular", 14 | "2", 15 | "Webpack", 16 | "Seed" 17 | ], 18 | "author": "jhades.dev@gmail.com", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/jhades/ng2-webpack-minimal/issues" 22 | }, 23 | "homepage": "https://github.com/jhades/ng2-webpack-minimal#readme", 24 | "devDependencies": { 25 | "typescript": "^1.7.5", 26 | "webpack": "^1.12.9", 27 | "webpack-dev-server": "^1.14.0" 28 | }, 29 | "dependencies": { 30 | "@angular/common": "2.0.0-rc.1", 31 | "@angular/compiler": "2.0.0-rc.1", 32 | "@angular/core": "2.0.0-rc.1", 33 | "@angular/http": "2.0.0-rc.1", 34 | "@angular/platform-browser": "2.0.0-rc.1", 35 | "@angular/platform-browser-dynamic": "2.0.0-rc.1", 36 | "rxjs": "5.0.0-beta.6", 37 | "zone.js": "^0.6.12", 38 | "angular2-library-example": "^1.0.6", 39 | "es6-promise": "^3.0.2", 40 | "core-js": "^2.4.0", 41 | "reflect-metadata": "0.1.2", 42 | "ts-loader": "^0.8.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/webpack/src/app.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js/dist/zone'; 2 | import 'reflect-metadata'; 3 | 4 | import {Component} from '@angular/core'; 5 | import {bootstrap} from '@angular/platform-browser-dynamic'; 6 | import {HelloWorld} from 'angular2-library-example/components'; 7 | 8 | 9 | @Component({ 10 | selector: 'app', 11 | directives: [HelloWorld], 12 | template: `

13 | 14 | {{message}} 15 | 16 |

` 17 | }) 18 | export class App { 19 | 20 | message = ""; 21 | 22 | onKeyUp(input) { 23 | this.message = input.value; 24 | } 25 | 26 | } 27 | 28 | 29 | bootstrap(App); 30 | -------------------------------------------------------------------------------- /examples/webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ng2-webpack-minimal 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/webpack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "target": "es6", 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "removeComments": true, 9 | "sourceMap": true, 10 | "declaration": true 11 | }, 12 | "exclude": [ 13 | "node_modules" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /examples/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | entry: "./src/app.ts", 5 | output: { 6 | filename: "bundle.js" 7 | }, 8 | devtool: 'source-map', 9 | 10 | resolve: { 11 | extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'], 12 | // Two lines below fix dependency resolution when npm linking the component. 13 | fallback: path.join(__dirname, "node_modules") 14 | }, 15 | resolveLoader: {fallback: path.join(__dirname, "node_modules")}, 16 | 17 | module: { 18 | loaders: [ 19 | { 20 | test: /\.ts$/, loader: 'ts-loader' 21 | } 22 | ] 23 | }, 24 | noParse: [ 25 | path.join(__dirname, 'node_modules', 'zone.js', 'dist') 26 | ] 27 | }; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-library-example", 3 | "version": "1.0.6", 4 | "description": "An example repository for building your own Angular 2 library", 5 | "main": "angular2-library-example.js", 6 | "scripts": { 7 | "watch": "tsc -p src -w", 8 | "build": "rm -rf lib && tsc -p src" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/jhades/angular2-library-seed.git" 13 | }, 14 | "keywords": [ 15 | "Angular", 16 | "2", 17 | "Library", 18 | "Seed" 19 | ], 20 | "author": "jhades.dev@gmail.com", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/jhades/angular2-library-seed/issues" 24 | }, 25 | "homepage": "https://github.com/jhades/angular2-library-seed#readme", 26 | "devDependencies": { 27 | "typescript": "^1.7.5" 28 | }, 29 | "dependencies": { 30 | "@angular/common": "2.0.0-rc.1", 31 | "@angular/compiler": "2.0.0-rc.1", 32 | "@angular/core": "2.0.0-rc.1", 33 | "@angular/http": "2.0.0-rc.1", 34 | "@angular/platform-browser": "2.0.0-rc.1", 35 | "@angular/platform-browser-dynamic": "2.0.0-rc.1", 36 | "rxjs": "5.0.0-beta.6", 37 | "zone.js":"^0.6.12" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/HelloWorld.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hello-world', 5 | styles: [` 6 | h1 { 7 | color: blue; 8 | } 9 | `], 10 | template: `

11 |

12 |

` 13 | }) 14 | export class HelloWorld { 15 | 16 | message = "Click Me ..."; 17 | 18 | onClick() { 19 | this.message = "Hello World!"; 20 | console.log(this.message); 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "target": "es6", 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "removeComments": true, 9 | "sourceMap": true, 10 | "outDir": "../lib", 11 | "declaration": true 12 | } 13 | } 14 | --------------------------------------------------------------------------------