├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app_state.service.ts │ └── index.ts ├── index.html ├── main.browser.ts ├── platform │ └── browser │ │ └── index.ts └── vendors.ts ├── tsconfig.json ├── tslint.json ├── typings.json └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # @TheLarkInn 2 | # http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | [*.md] 15 | insert_final_newline = false 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ehthumbs.db 3 | Icon? 4 | Thumbs.db 5 | 6 | # Node Files # 7 | /node_modules 8 | /bower_components 9 | npm-debug.log 10 | 11 | # Typing # 12 | /src/typings/tsd/ 13 | /typings/ 14 | /tsd_typings/ 15 | 16 | # Dist # 17 | /dist 18 | /public/__build__/ 19 | /src/*/__build__/ 20 | /__build__/** 21 | /public/dist/ 22 | /src/*/dist/ 23 | /dist/** 24 | .webpack.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Sean Larkin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular2-webpack-lite 2 | Super lite boilerplate of Angular2 with Webpack and Typescript. 3 | 4 | ## About 5 | 6 | ## Getting Started 7 | 8 | Fork and Clone! Then `cd into/your/directory` 9 | 10 | Install node modules 11 | `npm install` 12 | 13 | Install Typings 14 | 15 | ``` 16 | npm install -g typings 17 | 18 | typings install 19 | ``` 20 | 21 | To run the dev server 22 | `npm run server:dev` 23 | 24 | To build 25 | `npm run build` 26 | 27 | ## Additional Documentation to come 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-webpack-lite", 3 | "version": "1.0.0", 4 | "description": "Angular2 Webpack Lite Boilerplate", 5 | "main": "index.ts", 6 | "scripts": { 7 | "typings": "typings", 8 | "postinstall": "npm run typings -- install", 9 | "build": "webpack --progress --profile --colors --display-error-details --display-cached", 10 | "server:dev": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/TheLarkInn/angular2-webpack-lite.git" 15 | }, 16 | "author": "Sean Larkin", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/TheLarkInn/angular2-webpack-lite/issues" 20 | }, 21 | "homepage": "https://github.com/TheLarkInn/angular2-webpack-lite#readme", 22 | "engines": { 23 | "node": ">= 4.2.1", 24 | "npm": ">= 3" 25 | }, 26 | "dependencies": { 27 | "@angular/common": "^2.0.0-rc.1", 28 | "@angular/compiler": "^2.0.0-rc.1", 29 | "@angular/compiler-cli": "^0.2.0", 30 | "@angular/core": "^2.0.0-rc.1", 31 | "@angular/http": "^2.0.0-rc.1", 32 | "@angular/platform-browser": "^2.0.0-rc.1", 33 | "@angular/platform-browser-dynamic": "^2.0.0-rc.1", 34 | "@angular/platform-server": "^2.0.0-rc.1", 35 | "@angular/router": "^2.0.0-rc.1", 36 | "core-js": "^2.2.2", 37 | "normalize.css": "^4.1.1", 38 | "rxjs": "^5.0.0-beta.7", 39 | "zone.js": "^0.6.11" 40 | }, 41 | "devDependencies": { 42 | "angular2-hmr": "~0.6.0", 43 | "awesome-typescript-loader": "~0.17.0", 44 | "compression-webpack-plugin": "^0.3.1", 45 | "copy-webpack-plugin": "^2.1.3", 46 | "css-loader": "^0.23.1", 47 | "es6-promise": "^3.1.2", 48 | "es6-promise-loader": "^1.0.1", 49 | "es6-shim": "^0.35.0", 50 | "es7-reflect-metadata": "^1.6.0", 51 | "exports-loader": "^0.6.3", 52 | "expose-loader": "^0.7.1", 53 | "file-loader": "^0.8.5", 54 | "html-webpack-plugin": "^2.15.0", 55 | "http-server": "^0.9.0", 56 | "imports-loader": "^0.6.5", 57 | "json-loader": "^0.5.4", 58 | "raw-loader": "0.5.1", 59 | "source-map-loader": "^0.1.5", 60 | "style-loader": "^0.13.1", 61 | "ts-helpers": "1.1.1", 62 | "ts-node": "^0.7.1", 63 | "tslint": "^3.7.1", 64 | "tslint-loader": "^2.1.3", 65 | "typedoc": "^0.3.12", 66 | "typescript": "^1.9.0-dev", 67 | "typings": "^0.8.1", 68 | "url-loader": "^0.5.7", 69 | "webpack": "^1.13.0", 70 | "webpack-dev-server": "^1.14.1", 71 | "webpack-md5-hash": "^0.0.5", 72 | "webpack-merge": "^0.12.0" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

{{staticPublicProp}}

3 |
4 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | import {AppState} from './app_state.service.ts'; 4 | 5 | @Component({ 6 | selector: 'app', 7 | pipes: [], 8 | providers: [], 9 | directives: [], 10 | styles: [], 11 | template: `
Hello World
` 12 | }) 13 | export class App { 14 | onLoadWelcomeMessage: string = `Hello ngConf! I'm logging on ngOnInit()`; 15 | name: string = 'Angular2 Webpack Lite'; 16 | 17 | constructor(public appState: AppState) {} 18 | 19 | ngOnInit() { 20 | console.log(this.onLoadWelcomeMessage, `App state is ${this.appState.state}`); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/app_state.service.ts: -------------------------------------------------------------------------------- 1 | /* Thanks from @AngularClass */ 2 | import {Injectable} from '@angular/core'; 3 | 4 | export class AppState { 5 | _state = {}; 6 | 7 | constructor() {} 8 | 9 | // already return a clone of the current state 10 | get state() { 11 | return this._state = this._clone(this._state); 12 | } 13 | // never allow mutation 14 | set state(value) { 15 | throw new Error('do not mutate the `.state` directly'); 16 | } 17 | 18 | get(prop?: any) { 19 | // use our state getter for the clone 20 | const state = this.state; 21 | return state[prop] || state; 22 | } 23 | 24 | set(prop: string, value: any) { 25 | return this._state[prop] = value; 26 | } 27 | 28 | 29 | _clone(object) { 30 | return JSON.parse(JSON.stringify( object )); 31 | } 32 | 33 | 34 | } -------------------------------------------------------------------------------- /src/app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app.component.ts'; 2 | export * from './app_state.service.ts'; 3 | 4 | import {AppState} from './app_state.service.ts'; 5 | /* 6 | This is where you would add your custom application providers. 7 | */ 8 | export const APP_PROVIDERS = [ 9 | AppState 10 | ] 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular2-Webpack-Lite Boilerplate - by: @TheLarkInn 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Loading... 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/main.browser.ts: -------------------------------------------------------------------------------- 1 | import {bootstrap} from '@angular/platform-browser-dynamic'; 2 | import {DIRECTIVES, PIPES, PROVIDERS, ENV_PROVIDERS} from './platform/browser'; 3 | import {App, APP_PROVIDERS} from './app'; 4 | 5 | bootstrap(App, [ 6 | ...PROVIDERS, 7 | ...ENV_PROVIDERS, 8 | ...DIRECTIVES, 9 | ...PIPES, 10 | ...APP_PROVIDERS 11 | ]).catch(console.error) -------------------------------------------------------------------------------- /src/platform/browser/index.ts: -------------------------------------------------------------------------------- 1 | import {provide, PLATFORM_DIRECTIVES, PLATFORM_PIPES} from '@angular/core'; 2 | import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; 3 | import {FORM_PROVIDERS} from '@angular/common'; 4 | import {HTTP_PROVIDERS, JSONP_PROVIDERS} from '@angular/http'; 5 | import {ELEMENT_PROBE_PROVIDERS /*,ELEMENT_PROBE_PROVIDERS_PROD_MODE*/} from '@angular/platform-browser'; 6 | import {LocationStrategy, HashLocationStrategy, Location} from '@angular/common'; 7 | 8 | 9 | /* 10 | Add custom env providers here. 11 | */ 12 | export const ENVIRONMENT_PROVIDERS = [ 13 | ...ELEMENT_PROBE_PROVIDERS 14 | ] 15 | 16 | /* 17 | Add custom _angular2_ providers here. 18 | */ 19 | export const NG_APPLICATION_PROVIDERS = [ 20 | ...FORM_PROVIDERS, 21 | ...HTTP_PROVIDERS, 22 | ...JSONP_PROVIDERS, 23 | ...ROUTER_PROVIDERS, 24 | provide(LocationStrategy, { useClass: HashLocationStrategy }) 25 | ]; 26 | 27 | /* 28 | Add your custom pipes here. 29 | */ 30 | export const APPLICATION_PIPES = [ 31 | 32 | ]; 33 | 34 | /* 35 | Add your custom directives here to be use anywhere. 36 | */ 37 | export const APPLICATION_DIRECTIVES = [ 38 | ...ROUTER_DIRECTIVES 39 | ]; 40 | 41 | 42 | /* 43 | These are the 3 exported constants we will add to our bootstrap in our main file. 44 | */ 45 | export const ENV_PROVIDERS = [ 46 | ...ENVIRONMENT_PROVIDERS 47 | ] 48 | 49 | export const PROVIDERS = [ 50 | ...NG_APPLICATION_PROVIDERS 51 | ]; 52 | 53 | export const PIPES = [ 54 | provide(PLATFORM_PIPES, { multi: true, useValue: APPLICATION_PIPES }) 55 | ]; 56 | 57 | export const DIRECTIVES = [ 58 | provide(PLATFORM_DIRECTIVES, { multi: true, useValue: APPLICATION_DIRECTIVES }) 59 | ]; 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /src/vendors.ts: -------------------------------------------------------------------------------- 1 | // Prefer CoreJS over the polyfills above 2 | import 'core-js/es6'; 3 | import 'core-js/es7/reflect'; 4 | require('zone.js/dist/zone'); 5 | 6 | // Typescript emit helpers polyfill 7 | import 'ts-helpers'; 8 | 9 | // Angular 2 10 | import '@angular/platform-browser-dynamic'; 11 | import '@angular/core'; 12 | import '@angular/common'; 13 | import '@angular/http'; 14 | import '@angular/router'; 15 | 16 | // RxJS 17 | import 'rxjs/add/operator/map'; 18 | import 'rxjs/add/operator/mergeMap'; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true, 8 | "noEmitHelpers": true 9 | }, 10 | "exclude": [ 11 | "node_modules", 12 | "typings/main.d.ts", 13 | "typings/main" 14 | ], 15 | "filesGlob": [ 16 | "./src/**/*.ts", 17 | "./test/**/*.ts", 18 | "!./node_modules/**/*.ts", 19 | "src/custom-typings.d.ts", 20 | "typings/browser.d.ts" 21 | ], 22 | "awesomeTypescriptLoaderOptions": { 23 | "resolveGlobs": true, 24 | "forkChecker": true 25 | }, 26 | "compileOnSave": false, 27 | "buildOnSave": false, 28 | "atom": { "rewriteTsconfig": false } 29 | } 30 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer/dist/src" 4 | ], 5 | "rules": { 6 | "member-access": false, 7 | "member-ordering": [ 8 | true, 9 | "public-before-private", 10 | "static-before-instance", 11 | "variables-before-functions" 12 | ], 13 | "no-any": false, 14 | "no-inferrable-types": false, 15 | "no-internal-module": true, 16 | "no-var-requires": false, 17 | "typedef": false, 18 | "typedef-whitespace": [ 19 | true, 20 | { 21 | "call-signature": "nospace", 22 | "index-signature": "nospace", 23 | "parameter": "nospace", 24 | "property-declaration": "nospace", 25 | "variable-declaration": "nospace" 26 | }, 27 | { 28 | "call-signature": "space", 29 | "index-signature": "space", 30 | "parameter": "space", 31 | "property-declaration": "space", 32 | "variable-declaration": "space" 33 | } 34 | ], 35 | 36 | "ban": false, 37 | "curly": false, 38 | "forin": true, 39 | "label-position": true, 40 | "label-undefined": true, 41 | "no-arg": true, 42 | "no-bitwise": true, 43 | "no-conditional-assignment": true, 44 | "no-console": [ 45 | true, 46 | "debug", 47 | "info", 48 | "time", 49 | "timeEnd", 50 | "trace" 51 | ], 52 | "no-construct": true, 53 | "no-debugger": true, 54 | "no-duplicate-key": true, 55 | "no-duplicate-variable": true, 56 | "no-empty": false, 57 | "no-eval": true, 58 | "no-null-keyword": true, 59 | "no-shadowed-variable": true, 60 | "no-string-literal": true, 61 | "no-switch-case-fall-through": true, 62 | "no-unreachable": true, 63 | "no-unused-expression": true, 64 | "no-unused-variable": false, 65 | "no-use-before-declare": true, 66 | "no-var-keyword": true, 67 | "radix": true, 68 | "switch-default": true, 69 | "triple-equals": [ 70 | true, 71 | "allow-null-check" 72 | ], 73 | "use-strict": [ 74 | true, 75 | "check-module" 76 | ], 77 | 78 | "eofline": true, 79 | "indent": [ 80 | true, 81 | "spaces" 82 | ], 83 | "max-line-length": [ 84 | true, 85 | 100 86 | ], 87 | "no-require-imports": false, 88 | "no-trailing-whitespace": true, 89 | "object-literal-sort-keys": false, 90 | "trailing-comma": [ 91 | true, 92 | { 93 | "multiline": "never", 94 | "singleline": "never" 95 | } 96 | ], 97 | 98 | "align": false, 99 | "class-name": true, 100 | "comment-format": [ 101 | true, 102 | "check-space" 103 | ], 104 | "interface-name": false, 105 | "jsdoc-format": true, 106 | "no-consecutive-blank-lines": false, 107 | "no-constructor-vars": false, 108 | "one-line": [ 109 | true, 110 | "check-open-brace", 111 | "check-catch", 112 | "check-else", 113 | "check-finally", 114 | "check-whitespace" 115 | ], 116 | "quotemark": [ 117 | true, 118 | "single", 119 | "avoid-escape" 120 | ], 121 | "semicolon": [true, "always"], 122 | "variable-name": [ 123 | true, 124 | "check-format", 125 | "allow-leading-underscore", 126 | "ban-keywords" 127 | ], 128 | "whitespace": [ 129 | true, 130 | "check-branch", 131 | "check-decl", 132 | "check-operator", 133 | "check-separator", 134 | "check-type" 135 | ], 136 | 137 | "directive-selector-name": [true, "kebab-case"], 138 | "component-selector-name": [true, "kebab-case"], 139 | "directive-selector-type": [true, "attribute"], 140 | "component-selector-type": [true, "element"], 141 | "directive-selector-prefix": false, 142 | "component-selector-prefix": false, 143 | "host-parameter-decorator": true, 144 | "input-parameter-decorator": true, 145 | "output-parameter-decorator": true, 146 | "attribute-parameter-decorator": false, 147 | "input-property-directive": true, 148 | "output-property-directive": true, 149 | "call-forward-ref":true 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89" 4 | }, 5 | "devDependencies": {}, 6 | "ambientDependencies": { 7 | "core-js": "registry:dt/core-js#0.0.0+20160317120654", 8 | "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7", 9 | "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729", 10 | "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var _root = path.resolve(__dirname, '..'); 3 | 4 | function root(args) { 5 | args = Array.prototype.slice.call(arguments, 0); 6 | return path.join.apply(path, [_root].concat(args)); 7 | } 8 | 9 | const webpack = require('webpack'); 10 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 11 | const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 12 | 13 | module.exports = { 14 | entry: { 15 | vendor: './src/vendors.ts', 16 | main: './src/main.browser.ts' 17 | }, 18 | output: { 19 | path: 'dist/', 20 | filename: '[name].bundle.js', 21 | sourceMapFilename: '[name].map', 22 | chunkFilename: '[id].chunk.js' 23 | }, 24 | resolve: { 25 | extensions: ['', '.ts', '.js'], 26 | root: root('src'), 27 | modulesDirectories: ['node_modules'] 28 | }, 29 | module: { 30 | preLoaders: [ 31 | { 32 | test: /\.js$/, 33 | loader: 'source-map-loader', 34 | exclude: [ 35 | // these packages have problems with their sourcemaps 36 | root('node_modules/rxjs') 37 | ] 38 | } 39 | 40 | ], 41 | loaders: [ 42 | { 43 | test: /\.ts$/, 44 | loader: 'awesome-typescript-loader', 45 | exclude: [/\.(spec|e2e)\.ts$/] 46 | }, 47 | { 48 | test: /\.json$/, 49 | loader: 'json-loader' 50 | }, 51 | { 52 | test: /\.css$/, 53 | loader: 'raw-loader' 54 | }, 55 | { 56 | test: /\.html$/, 57 | loader: 'raw-loader', 58 | exclude: [root('src/index.html')] 59 | } 60 | ] 61 | }, 62 | plugins: [ 63 | new ForkCheckerPlugin(), 64 | new webpack.optimize.OccurenceOrderPlugin(true), 65 | new webpack.optimize.CommonsChunkPlugin({ 66 | name: 'vendor' 67 | }), 68 | new HtmlWebpackPlugin({ 69 | template: 'src/index.html' 70 | }) 71 | ], 72 | node: { 73 | global: 'window', 74 | crypto: 'empty', 75 | module: false, 76 | clearImmediate: false, 77 | setImmediate: false 78 | } 79 | } --------------------------------------------------------------------------------