├── .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 |
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 | }
--------------------------------------------------------------------------------