,
37 | @Optional() @Attribute('router-active') routerActiveAttr?: string) {
38 |
39 | this.routerActiveAttr = this._defaultAttrValue(routerActiveAttr);
40 | }
41 |
42 | ngOnInit() {
43 | this.routerLink.changes.subscribe(() => {
44 | if (this.routerLink.first) {
45 | this._updateClass();
46 | this._findRootRouter().subscribe(() => {
47 | this._updateClass();
48 | });
49 | }
50 | });
51 | }
52 |
53 | private _findRootRouter(): Router {
54 | var router: Router = this.router;
55 | while (isPresent(router.parent)) {
56 | router = router.parent;
57 | }
58 | return router;
59 | }
60 |
61 | private _updateClass() {
62 | let active = this.routerLink.first.isRouteActive;
63 | this.renderer.setElementClass(this.element.nativeElement, this._attrOrProp(), active);
64 | }
65 |
66 | private _defaultAttrValue(attr?: string) {
67 | return this.routerActiveAttr = attr || this.routerActiveAttr;
68 | }
69 |
70 | private _attrOrProp() {
71 | return isPresent(this.routerActive) ? this.routerActive : this.routerActiveAttr;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/config/karma.conf.js:
--------------------------------------------------------------------------------
1 | // @AngularClass
2 |
3 | module.exports = function(config) {
4 | var testWebpackConfig = require('./webpack.test.js');
5 |
6 | config.set({
7 |
8 | // base path that will be used to resolve all patterns (e.g. files, exclude)
9 | basePath: '',
10 |
11 | // frameworks to use
12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 | frameworks: ['jasmine'],
14 |
15 | // list of files to exclude
16 | exclude: [ ],
17 |
18 | // list of files / patterns to load in the browser
19 | // we are building the test environment in ./spec-bundle.js
20 | files: [ { pattern: './config/spec-bundle.js', watched: false } ],
21 |
22 | // preprocess matching files before serving them to the browser
23 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
24 | preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
25 |
26 | // Webpack Config at ./webpack.test.js
27 | webpack: testWebpackConfig,
28 |
29 | coverageReporter: {
30 | dir : 'coverage/',
31 | reporters: [
32 | { type: 'text-summary' },
33 | { type: 'json' },
34 | { type: 'html' }
35 | ]
36 | },
37 |
38 | // Webpack please don't spam the console when running in karma!
39 | webpackServer: { noInfo: true },
40 |
41 | // test results reporter to use
42 | // possible values: 'dots', 'progress'
43 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter
44 | reporters: [ 'mocha', 'coverage' ],
45 |
46 | // web server port
47 | port: 9876,
48 |
49 | // enable / disable colors in the output (reporters and logs)
50 | colors: true,
51 |
52 | // level of logging
53 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 | logLevel: config.LOG_INFO,
55 |
56 | // enable / disable watching file and executing tests whenever any file changes
57 | autoWatch: false,
58 |
59 | // start these browsers
60 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
61 | browsers: [
62 | // 'Chrome',
63 | 'PhantomJS'
64 | ],
65 |
66 | // Continuous Integration mode
67 | // if true, Karma captures browsers, runs the tests and exits
68 | singleRun: true
69 | });
70 |
71 | };
72 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular 2 decorators and services
3 | */
4 | import {Component, ViewEncapsulation} from 'angular2/core';
5 | import {RouteConfig, Router} from 'angular2/router';
6 |
7 | import {Home} from './home';
8 | import {AppState} from './app.service';
9 | import {RouterActive} from './router-active';
10 |
11 | /*
12 | * App Component
13 | * Top Level Component
14 | */
15 | @Component({
16 | selector: 'app',
17 | pipes: [ ],
18 | providers: [ ],
19 | directives: [ RouterActive ],
20 | encapsulation: ViewEncapsulation.None,
21 | styles: [`
22 | body {
23 | margin: 0;
24 | }
25 | md-toolbar ul {
26 | display: inline;
27 | list-style-type: none;
28 | margin: 0;
29 | padding: 0;
30 | width: 60px;
31 | }
32 | md-toolbar li {
33 | display: inline;
34 | }
35 | md-toolbar li.active {
36 | background-color: lightgray;
37 | }
38 | `],
39 | template: `
40 |
41 | {{ name }}
42 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | this.appState.state = {{ appState.state | json }}
64 |
65 |
71 | `
72 | })
73 | @RouteConfig([
74 | { path: '/', name: 'Index', component: Home, useAsDefault: true },
75 | { path: '/home', name: 'Home', component: Home },
76 | // Async load a component using Webpack's require with es6-promise-loader and webpack `require`
77 | { path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') },
78 | ])
79 | export class App {
80 | angularclassLogo = 'assets/img/angularclass-avatar.png';
81 | name = 'Angular 2 Webpack Starter';
82 | url = 'https://twitter.com/AngularClass';
83 |
84 | constructor(public appState: AppState) {}
85 |
86 | ngOnInit() {
87 | console.log('Initial App State', this.appState.state);
88 | }
89 |
90 | }
91 |
92 | /*
93 | * Please review the https://github.com/AngularClass/angular2-examples/ repo for
94 | * more angular app examples that you may copy/paste
95 | * (The examples may not be updated as quickly. Please open an issue on github for us to update it)
96 | * For help or questions please contact us at @AngularClass on twitter
97 | * or our chat on Slack at https://AngularClass.com/slack-join
98 | */
99 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <%= webpackConfig.metadata.title %>
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Loading...
42 |
43 |
44 |
45 |
54 |
55 | <% if (webpackConfig.metadata.ENV === 'development') { %>
56 |
57 |
58 | <% } %>
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author: @AngularClass
3 | */
4 |
5 | var helpers = require('./helpers');
6 | var webpackMerge = require('webpack-merge'); //Used to merge webpack configs
7 | var commonConfig = require('./webpack.common.js'); //The settings that are common to prod and dev
8 |
9 | /**
10 | * Webpack Plugins
11 | */
12 | var DefinePlugin = require('webpack/lib/DefinePlugin');
13 |
14 | /**
15 | * Webpack Constants
16 | */
17 | const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
18 | const HMR = helpers.hasProcessFlag('hot');
19 | const METADATA = webpackMerge(commonConfig.metadata, {
20 | host: 'localhost',
21 | port: 3000,
22 | ENV: ENV,
23 | HMR: HMR
24 | });
25 |
26 | /**
27 | * Webpack configuration
28 | *
29 | * See: http://webpack.github.io/docs/configuration.html#cli
30 | */
31 | module.exports = webpackMerge(commonConfig, {
32 | // Switch loaders to debug mode.
33 | //
34 | // See: http://webpack.github.io/docs/configuration.html#debug
35 | debug: true,
36 |
37 | // Developer tool to enhance debugging
38 | //
39 | // See: http://webpack.github.io/docs/configuration.html#devtool
40 | // See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
41 | devtool: 'cheap-module-eval-source-map',
42 |
43 | // Options affecting the output of the compilation.
44 | //
45 | // See: http://webpack.github.io/docs/configuration.html#output
46 | output: {
47 |
48 | // The output directory as absolute path (required).
49 | //
50 | // See: http://webpack.github.io/docs/configuration.html#output-path
51 | path: helpers.root('dist'),
52 |
53 | // Specifies the name of each output file on disk.
54 | // IMPORTANT: You must not specify an absolute path here!
55 | //
56 | // See: http://webpack.github.io/docs/configuration.html#output-filename
57 | filename: '[name].bundle.js',
58 |
59 | // The filename of the SourceMaps for the JavaScript files.
60 | // They are inside the output.path directory.
61 | //
62 | // See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
63 | sourceMapFilename: '[name].map',
64 |
65 | // The filename of non-entry chunks as relative path
66 | // inside the output.path directory.
67 | //
68 | // See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
69 | chunkFilename: '[id].chunk.js'
70 |
71 | },
72 |
73 | plugins: [
74 | // Plugin: DefinePlugin
75 | // Description: Define free variables.
76 | // Useful for having development builds with debug logging or adding global constants.
77 | //
78 | // Environment helpers
79 | //
80 | // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
81 | // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
82 | new DefinePlugin({
83 | 'ENV': JSON.stringify(METADATA.ENV),
84 | 'HMR': METADATA.HMR,
85 | 'process.env': {
86 | 'ENV': JSON.stringify(METADATA.ENV),
87 | 'NODE_ENV': JSON.stringify(METADATA.ENV),
88 | 'HMR': METADATA.HMR,
89 | }
90 | }),
91 | ],
92 |
93 | // Static analysis linter for TypeScript advanced options configuration
94 | // Description: An extensible linter for the TypeScript language.
95 | //
96 | // See: https://github.com/wbuchwalter/tslint-loader
97 | tslint: {
98 | emitErrors: false,
99 | failOnHint: false,
100 | resourcePath: 'src'
101 | },
102 |
103 | // Webpack Development Server configuration
104 | // Description: The webpack-dev-server is a little node.js Express server.
105 | // The server emits information about the compilation state to the client,
106 | // which reacts to those events.
107 | //
108 | // See: https://webpack.github.io/docs/webpack-dev-server.html
109 | devServer: {
110 | port: METADATA.port,
111 | host: METADATA.host,
112 | historyApiFallback: true,
113 | watchOptions: {
114 | aggregateTimeout: 300,
115 | poll: 1000
116 | }
117 | },
118 |
119 | node: {
120 | global: 'window',
121 | crypto: 'empty',
122 | process: true,
123 | module: false,
124 | clearImmediate: false,
125 | setImmediate: false
126 | }
127 | });
128 |
--------------------------------------------------------------------------------
/src/custom-typings.d.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Custom Type Definitions
3 | * When including 3rd party modules you also need to include the type definition for the module
4 | * if they don't provide one within the module. You can try to install it with typings
5 |
6 | typings install node --save
7 |
8 | * If you can't find the type definition in the registry we can make an ambient definition in
9 | * this file for now. For example
10 |
11 | declare module "my-module" {
12 | export function doesSomething(value: string): string;
13 | }
14 |
15 | *
16 | * If you're prototying and you will fix the types later you can also declare it as type any
17 | *
18 |
19 | declare var assert: any;
20 |
21 | *
22 | * If you're importing a module that uses Node.js modules which are CommonJS you need to import as
23 | *
24 |
25 | import * as _ from 'lodash'
26 |
27 | * You can include your type definitions in this file until you create one for the typings registry
28 | * see https://github.com/typings/registry
29 | *
30 | */
31 |
32 |
33 | // Extra variables that live on Global that will be replaced by webpack DefinePlugin
34 | declare var ENV: string;
35 | declare var HMR: boolean;
36 | interface GlobalEnvironment {
37 | ENV;
38 | HMR;
39 | }
40 |
41 | interface WebpackModule {
42 | hot: {
43 | data?: any,
44 | idle: any,
45 | accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
46 | decline(dependencies?: string | string[]): void;
47 | dispose(callback?: (data?: any) => void): void;
48 | addDisposeHandler(callback?: (data?: any) => void): void;
49 | removeDisposeHandler(callback?: (data?: any) => void): void;
50 | check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
51 | apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;
52 | status(callback?: (status?: string) => void): void | string;
53 | removeStatusHandler(callback?: (status?: string) => void): void;
54 | };
55 | }
56 |
57 | interface WebpackRequire {
58 | context(file: string, flag?: boolean, exp?: RegExp): any;
59 | }
60 |
61 |
62 | interface ErrorStackTraceLimit {
63 | stackTraceLimit: number;
64 | }
65 |
66 |
67 |
68 | // Extend typings
69 | interface NodeRequire extends WebpackRequire {}
70 | interface ErrorConstructor extends ErrorStackTraceLimit {}
71 | interface NodeModule extends WebpackModule {}
72 | interface Global extends GlobalEnvironment {}
73 |
74 |
75 | declare namespace Reflect {
76 | function decorate(decorators: ClassDecorator[], target: Function): Function;
77 | function decorate(
78 | decorators: (PropertyDecorator | MethodDecorator)[],
79 | target: Object,
80 | targetKey: string | symbol,
81 | descriptor?: PropertyDescriptor): PropertyDescriptor;
82 |
83 | function metadata(metadataKey: any, metadataValue: any): {
84 | (target: Function): void;
85 | (target: Object, propertyKey: string | symbol): void;
86 | };
87 | function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
88 | function defineMetadata(
89 | metadataKey: any,
90 | metadataValue: any,
91 | target: Object,
92 | targetKey: string | symbol): void;
93 | function hasMetadata(metadataKey: any, target: Object): boolean;
94 | function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
95 | function hasOwnMetadata(metadataKey: any, target: Object): boolean;
96 | function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
97 | function getMetadata(metadataKey: any, target: Object): any;
98 | function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
99 | function getOwnMetadata(metadataKey: any, target: Object): any;
100 | function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
101 | function getMetadataKeys(target: Object): any[];
102 | function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
103 | function getOwnMetadataKeys(target: Object): any[];
104 | function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
105 | function deleteMetadata(metadataKey: any, target: Object): boolean;
106 | function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
107 | }
108 |
109 |
110 | // We need this here since there is a problem with Zone.js typings
111 | interface Thenable {
112 | then(
113 | onFulfilled?: (value: T) => U | Thenable,
114 | onRejected?: (error: any) => U | Thenable): Thenable;
115 | then(
116 | onFulfilled?: (value: T) => U | Thenable,
117 | onRejected?: (error: any) => void): Thenable;
118 | catch(onRejected?: (error: any) => U | Thenable): Thenable;
119 | }
120 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-webpack-starter",
3 | "version": "5.0.3",
4 | "description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
5 | "author": "Patrick Stapleton ",
6 | "homepage": "https://github.com/angularclass/angular2-webpack-starter",
7 | "license": "MIT",
8 | "scripts": {
9 | "rimraf": "rimraf",
10 | "tslint": "tslint",
11 | "typedoc": "typedoc",
12 | "typings": "typings",
13 | "webpack": "webpack",
14 | "webpack-dev-server": "webpack-dev-server",
15 | "webdriver-manager": "webdriver-manager",
16 | "protractor": "protractor",
17 | "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
18 | "clean:dist": "npm run rimraf -- dist",
19 | "preclean:install": "npm run clean",
20 | "clean:install": "npm set progress=false && npm install",
21 | "preclean:start": "npm run clean",
22 | "clean:start": "npm start",
23 | "watch": "npm run watch:dev",
24 | "watch:dev": "npm run build:dev -- --watch",
25 | "watch:dev:hmr": "npm run watch:dev -- --hot",
26 | "watch:test": "npm run test -- --auto-watch --no-single-run",
27 | "watch:prod": "npm run build:prod -- --watch",
28 | "build": "npm run build:dev",
29 | "prebuild:dev": "npm run clean:dist",
30 | "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
31 | "prebuild:prod": "npm run clean:dist",
32 | "build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
33 | "server": "npm run server:dev",
34 | "server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
35 | "server:dev:hmr": "npm run server:dev -- --hot",
36 | "server:prod": "http-server dist --cors",
37 | "webdriver:update": "npm run webdriver-manager update",
38 | "webdriver:start": "npm run webdriver-manager start",
39 | "lint": "npm run tslint 'src/**/*.ts'",
40 | "pree2e": "npm run webdriver:update -- --standalone",
41 | "e2e": "npm run protractor",
42 | "e2e:live": "npm run e2e -- --elementExplorer",
43 | "test": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
44 | "ci": "npm run e2e && npm run test",
45 | "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
46 | "start": "npm run server:dev",
47 | "start:hmr": "npm run server:dev:hmr",
48 | "postinstall": "npm run typings -- install",
49 | "preversion": "npm test",
50 | "version": "npm run build",
51 | "postversion": "git push && git push --tags"
52 | },
53 | "dependencies": {
54 | "@angular2-material/button": "2.0.0-alpha.2",
55 | "@angular2-material/card": "2.0.0-alpha.2",
56 | "@angular2-material/checkbox": "2.0.0-alpha.2",
57 | "@angular2-material/core": "2.0.0-alpha.2",
58 | "@angular2-material/input": "2.0.0-alpha.2",
59 | "@angular2-material/list": "2.0.0-alpha.2",
60 | "@angular2-material/progress-circle": "2.0.0-alpha.2",
61 | "@angular2-material/radio": "2.0.0-alpha.2",
62 | "@angular2-material/sidenav": "2.0.0-alpha.2",
63 | "@angular2-material/toolbar": "2.0.0-alpha.2",
64 | "@ngrx/store": "^1.3.3",
65 | "angular2": "2.0.0-beta.14",
66 | "core-js": "^2.1.5",
67 | "immutable": "^3.7.6",
68 | "rxjs": "5.0.0-beta.4",
69 | "zone.js": "0.6.10",
70 | "normalizr": "^2.0.1"
71 | },
72 | "devDependencies": {
73 | "angular2-hmr": "~0.5.5",
74 | "awesome-typescript-loader": "~0.16.2",
75 | "codelyzer": "0.0.12",
76 | "compression-webpack-plugin": "^0.3.0",
77 | "copy-webpack-plugin": "^1.1.1",
78 | "css-loader": "^0.23.1",
79 | "es6-promise": "^3.1.2",
80 | "es6-promise-loader": "^1.0.1",
81 | "es6-shim": "^0.35.0",
82 | "es7-reflect-metadata": "^1.6.0",
83 | "exports-loader": "^0.6.3",
84 | "expose-loader": "^0.7.1",
85 | "file-loader": "^0.8.5",
86 | "html-webpack-plugin": "^2.9.0",
87 | "http-server": "^0.9.0",
88 | "imports-loader": "^0.6.5",
89 | "istanbul-instrumenter-loader": "^0.2.0",
90 | "json-loader": "^0.5.4",
91 | "json-server": "^0.8.9",
92 | "karma": "^0.13.22",
93 | "karma-chrome-launcher": "^0.2.2",
94 | "karma-coverage": "^0.5.5",
95 | "karma-jasmine": "^0.3.8",
96 | "karma-mocha-reporter": "^2.0.0",
97 | "karma-phantomjs-launcher": "^1.0.0",
98 | "karma-sourcemap-loader": "^0.3.7",
99 | "karma-webpack": "1.7.0",
100 | "parse5": "^1.3.2",
101 | "phantomjs-polyfill": "0.0.2",
102 | "phantomjs-prebuilt": "^2.1.6",
103 | "protractor": "^3.1.1",
104 | "raw-loader": "0.5.1",
105 | "remap-istanbul": "^0.5.1",
106 | "rimraf": "^2.5.2",
107 | "source-map-loader": "^0.1.5",
108 | "style-loader": "^0.13.0",
109 | "ts-helper": "0.0.1",
110 | "ts-node": "^0.7.0",
111 | "tslint": "^3.6.0",
112 | "tslint-loader": "^2.1.3",
113 | "typedoc": "^0.3.12",
114 | "typescript": "~1.8.9",
115 | "typings": "^0.7.9",
116 | "url-loader": "^0.5.7",
117 | "webpack": "^1.12.14",
118 | "webpack-dev-server": "^1.14.1",
119 | "webpack-md5-hash": "^0.0.5",
120 | "webpack-merge": "^0.8.4"
121 | },
122 | "repository": {
123 | "type": "git",
124 | "url": "https://github.com/angularclass/angular2-webpack-starter.git"
125 | },
126 | "bugs": {
127 | "url": "https://github.com/angularclass/angular2-webpack-starter/issues"
128 | },
129 | "engineStrict": true,
130 | "engines": {
131 | "node": ">= 4.2.1",
132 | "npm": ">= 3"
133 | }
134 | }
--------------------------------------------------------------------------------
/config/webpack.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author: @AngularClass
3 | */
4 |
5 | var helpers = require('./helpers');
6 |
7 | /**
8 | * Webpack Plugins
9 | */
10 | var ProvidePlugin = require('webpack/lib/ProvidePlugin');
11 | var DefinePlugin = require('webpack/lib/DefinePlugin');
12 |
13 | /**
14 | * Webpack Constants
15 | */
16 | const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
17 |
18 | /**
19 | * Webpack configuration
20 | *
21 | * See: http://webpack.github.io/docs/configuration.html#cli
22 | */
23 | module.exports = {
24 |
25 | // Source map for Karma from the help of karma-sourcemap-loader & karma-webpack
26 | //
27 | // Do not change, leave as is or it wont work.
28 | // See: https://github.com/webpack/karma-webpack#source-maps
29 | devtool: 'inline-source-map',
30 |
31 | // Options affecting the resolving of modules.
32 | //
33 | // See: http://webpack.github.io/docs/configuration.html#resolve
34 | resolve: {
35 |
36 | // An array of extensions that should be used to resolve modules.
37 | //
38 | // See: http://webpack.github.io/docs/configuration.html#resolve-extensions
39 | extensions: ['', '.ts', '.js'],
40 |
41 | // Make sure root is src
42 | root: helpers.root('src'),
43 |
44 | },
45 |
46 | // Options affecting the normal modules.
47 | //
48 | // See: http://webpack.github.io/docs/configuration.html#module
49 | module: {
50 |
51 | // An array of applied pre and post loaders.
52 | //
53 | // See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
54 | preLoaders: [
55 |
56 | // Tslint loader support for *.ts files
57 | //
58 | // See: https://github.com/wbuchwalter/tslint-loader
59 | {test: /\.ts$/, loader: 'tslint-loader', exclude: [helpers.root('node_modules')]},
60 |
61 | // Source map loader support for *.js files
62 | // Extracts SourceMaps for source files that as added as sourceMappingURL comment.
63 | //
64 | // See: https://github.com/webpack/source-map-loader
65 | {test: /\.js$/, loader: "source-map-loader", exclude: [
66 | // these packages have problems with their sourcemaps
67 | helpers.root('node_modules/rxjs'),
68 | helpers.root('node_modules/@angular2-material')
69 | ]}
70 |
71 | ],
72 |
73 | // An array of automatically applied loaders.
74 | //
75 | // IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
76 | // This means they are not resolved relative to the configuration file.
77 | //
78 | // See: http://webpack.github.io/docs/configuration.html#module-loaders
79 | loaders: [
80 |
81 | // Typescript loader support for .ts and Angular 2 async routes via .async.ts
82 | //
83 | // See: https://github.com/s-panferov/awesome-typescript-loader
84 | {
85 | test: /\.ts$/,
86 | loader: 'awesome-typescript-loader',
87 | query: {
88 | "compilerOptions": {
89 |
90 | // Remove TypeScript helpers to be injected
91 | // below by DefinePlugin
92 | "removeComments": true
93 |
94 | }
95 | },
96 | exclude: [/\.e2e\.ts$/]
97 | },
98 |
99 | // Json loader support for *.json files.
100 | //
101 | // See: https://github.com/webpack/json-loader
102 | {test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')]},
103 |
104 | // Raw loader support for *.css files
105 | // Returns file content as string
106 | //
107 | // See: https://github.com/webpack/raw-loader
108 | {test: /\.css$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')]},
109 |
110 | // Raw loader support for *.html
111 | // Returns file content as string
112 | //
113 | // See: https://github.com/webpack/raw-loader
114 | {test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')]}
115 |
116 | ],
117 |
118 | // An array of applied pre and post loaders.
119 | //
120 | // See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
121 | postLoaders: [
122 |
123 | // Instruments JS files with Istanbul for subsequent code coverage reporting.
124 | // Instrument only testing sources.
125 | //
126 | // See: https://github.com/deepsweet/istanbul-instrumenter-loader
127 | {
128 | test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
129 | include: helpers.root('src'),
130 | exclude: [
131 | /\.(e2e|spec)\.ts$/,
132 | /node_modules/
133 | ]
134 | }
135 |
136 | ]
137 | },
138 |
139 | // Add additional plugins to the compiler.
140 | //
141 | // See: http://webpack.github.io/docs/configuration.html#plugins
142 | plugins: [
143 |
144 | // Plugin: DefinePlugin
145 | // Description: Define free variables.
146 | // Useful for having development builds with debug logging or adding global constants.
147 | //
148 | // Environment helpers
149 | //
150 | // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
151 | // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
152 | new DefinePlugin({
153 | 'ENV': JSON.stringify(ENV),
154 | 'HMR': false,
155 | 'process.env': {
156 | 'ENV': JSON.stringify(ENV),
157 | 'NODE_ENV': JSON.stringify(ENV),
158 | 'HMR': false,
159 | }
160 | }),
161 |
162 |
163 | ],
164 |
165 | // Static analysis linter for TypeScript advanced options configuration
166 | // Description: An extensible linter for the TypeScript language.
167 | //
168 | // See: https://github.com/wbuchwalter/tslint-loader
169 | tslint: {
170 | emitErrors: false,
171 | failOnHint: false,
172 | resourcePath: 'src'
173 | },
174 |
175 | // Include polyfills or mocks for various node stuff
176 | // Description: Node configuration
177 | //
178 | // See: https://webpack.github.io/docs/configuration.html#node
179 | node: {
180 | global: 'window',
181 | process: false,
182 | crypto: 'empty',
183 | module: false,
184 | clearImmediate: false,
185 | setImmediate: false
186 | }
187 |
188 | };
189 |
--------------------------------------------------------------------------------
/config/webpack.common.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author: @AngularClass
3 | */
4 |
5 | var webpack = require('webpack');
6 | var helpers = require('./helpers');
7 |
8 | /**
9 | * Webpack Plugins
10 | */
11 | var CopyWebpackPlugin = require('copy-webpack-plugin');
12 | var HtmlWebpackPlugin = require('html-webpack-plugin');
13 | var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
14 |
15 | /**
16 | * Webpack Constants
17 | */
18 | const METADATA = {
19 | title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
20 | baseUrl: '/'
21 | };
22 |
23 | /**
24 | * Webpack configuration
25 | *
26 | * See: http://webpack.github.io/docs/configuration.html#cli
27 | */
28 | module.exports = {
29 |
30 | // Static metadata for index.html
31 | //
32 | // See: (custom attribute)
33 | metadata: METADATA,
34 |
35 | // Cache generated modules and chunks to improve performance for multiple incremental builds.
36 | // This is enabled by default in watch mode.
37 | // You can pass false to disable it.
38 | //
39 | // See: http://webpack.github.io/docs/configuration.html#cache
40 | // cache: false,
41 |
42 | // The entry point for the bundle
43 | // Our Angular.js app
44 | //
45 | // See: http://webpack.github.io/docs/configuration.html#entry
46 | entry: {
47 |
48 | 'polyfills': './src/polyfills.ts',
49 | 'vendor': './src/vendor.ts',
50 | 'main': './src/main.browser.ts',
51 |
52 | },
53 |
54 | // Options affecting the resolving of modules.
55 | //
56 | // See: http://webpack.github.io/docs/configuration.html#resolve
57 | resolve: {
58 |
59 | // An array of extensions that should be used to resolve modules.
60 | //
61 | // See: http://webpack.github.io/docs/configuration.html#resolve-extensions
62 | extensions: ['', '.ts', '.js'],
63 |
64 | // Make sure root is src
65 | root: helpers.root('src'),
66 |
67 | // remove other default values
68 | modulesDirectories: ['node_modules'],
69 |
70 | },
71 |
72 | // Options affecting the normal modules.
73 | //
74 | // See: http://webpack.github.io/docs/configuration.html#module
75 | module: {
76 |
77 | // An array of applied pre and post loaders.
78 | //
79 | // See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
80 | preLoaders: [
81 |
82 | // Tslint loader support for *.ts files
83 | //
84 | // See: https://github.com/wbuchwalter/tslint-loader
85 | // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
86 |
87 | // Source map loader support for *.js files
88 | // Extracts SourceMaps for source files that as added as sourceMappingURL comment.
89 | //
90 | // See: https://github.com/webpack/source-map-loader
91 | {
92 | test: /\.js$/,
93 | loader: 'source-map-loader',
94 | exclude: [
95 | // these packages have problems with their sourcemaps
96 | helpers.root('node_modules/rxjs'),
97 | helpers.root('node_modules/@angular2-material')
98 | ]
99 | }
100 |
101 | ],
102 |
103 | // An array of automatically applied loaders.
104 | //
105 | // IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
106 | // This means they are not resolved relative to the configuration file.
107 | //
108 | // See: http://webpack.github.io/docs/configuration.html#module-loaders
109 | loaders: [
110 |
111 | // Typescript loader support for .ts and Angular 2 async routes via .async.ts
112 | //
113 | // See: https://github.com/s-panferov/awesome-typescript-loader
114 | {
115 | test: /\.ts$/,
116 | loader: 'awesome-typescript-loader',
117 | exclude: [/\.(spec|e2e)\.ts$/]
118 | },
119 |
120 | // Json loader support for *.json files.
121 | //
122 | // See: https://github.com/webpack/json-loader
123 | {
124 | test: /\.json$/,
125 | loader: 'json-loader'
126 | },
127 |
128 | // Raw loader support for *.css files
129 | // Returns file content as string
130 | //
131 | // See: https://github.com/webpack/raw-loader
132 | {
133 | test: /\.css$/,
134 | loader: 'raw-loader'
135 | },
136 |
137 | // Raw loader support for *.html
138 | // Returns file content as string
139 | //
140 | // See: https://github.com/webpack/raw-loader
141 | {
142 | test: /\.html$/,
143 | loader: 'raw-loader',
144 | exclude: [helpers.root('src/index.html')]
145 | },
146 |
147 | ]
148 |
149 | },
150 |
151 | // Add additional plugins to the compiler.
152 | //
153 | // See: http://webpack.github.io/docs/configuration.html#plugins
154 | plugins: [
155 |
156 | // Plugin: ForkCheckerPlugin
157 | // Description: Do type checking in a separate process, so webpack don't need to wait.
158 | //
159 | // See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
160 | new ForkCheckerPlugin(),
161 |
162 | // Plugin: OccurenceOrderPlugin
163 | // Description: Varies the distribution of the ids to get the smallest id length
164 | // for often used ids.
165 | //
166 | // See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
167 | // See: https://github.com/webpack/docs/wiki/optimization#minimize
168 | new webpack.optimize.OccurenceOrderPlugin(true),
169 |
170 | // Plugin: CommonsChunkPlugin
171 | // Description: Shares common code between the pages.
172 | // It identifies common modules and put them into a commons chunk.
173 | //
174 | // See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
175 | // See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
176 | new webpack.optimize.CommonsChunkPlugin({
177 | name: helpers.reverse(['polyfills', 'vendor', 'main']),
178 | minChunks: Infinity
179 | }),
180 |
181 | // Plugin: CopyWebpackPlugin
182 | // Description: Copy files and directories in webpack.
183 | //
184 | // Copies project static assets.
185 | //
186 | // See: https://www.npmjs.com/package/copy-webpack-plugin
187 | new CopyWebpackPlugin([{
188 | from: 'src/assets',
189 | to: 'assets'
190 | }]),
191 |
192 | // Plugin: HtmlWebpackPlugin
193 | // Description: Simplifies creation of HTML files to serve your webpack bundles.
194 | // This is especially useful for webpack bundles that include a hash in the filename
195 | // which changes every compilation.
196 | //
197 | // See: https://github.com/ampedandwired/html-webpack-plugin
198 | new HtmlWebpackPlugin({
199 | template: 'src/index.html',
200 | chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
201 | })
202 |
203 | ],
204 |
205 | // Include polyfills or mocks for various node stuff
206 | // Description: Node configuration
207 | //
208 | // See: https://webpack.github.io/docs/configuration.html#node
209 | node: {
210 | global: 'window',
211 | crypto: 'empty',
212 | module: false,
213 | clearImmediate: false,
214 | setImmediate: false
215 | },
216 | };
217 |
--------------------------------------------------------------------------------
/config/webpack.prod.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author: @AngularClass
3 | */
4 |
5 | var helpers = require('./helpers'); // Helper: root(), and rootDir() are defined at the bottom
6 | var webpackMerge = require('webpack-merge'); //Used to merge webpack configs
7 | var commonConfig = require('./webpack.common.js'); //The settings that are common to prod and dev
8 |
9 | /**
10 | * Webpack Plugins
11 | */
12 | var ProvidePlugin = require('webpack/lib/ProvidePlugin');
13 | var DefinePlugin = require('webpack/lib/DefinePlugin');
14 | var DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
15 | var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
16 | var CompressionPlugin = require('compression-webpack-plugin');
17 | var WebpackMd5Hash = require('webpack-md5-hash');
18 |
19 | /**
20 | * Webpack Constants
21 | */
22 | const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
23 | const HOST = process.env.HOST || 'localhost';
24 | const PORT = process.env.PORT || 8080;
25 | const METADATA = webpackMerge(commonConfig.metadata, {
26 | host: HOST,
27 | port: PORT,
28 | ENV: ENV,
29 | HMR: false
30 | });
31 |
32 | module.exports = webpackMerge(commonConfig, {
33 | // Switch loaders to debug mode.
34 | //
35 | // See: http://webpack.github.io/docs/configuration.html#debug
36 | debug: false,
37 |
38 | // Developer tool to enhance debugging
39 | //
40 | // See: http://webpack.github.io/docs/configuration.html#devtool
41 | // See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
42 | devtool: 'source-map',
43 |
44 | // Options affecting the output of the compilation.
45 | //
46 | // See: http://webpack.github.io/docs/configuration.html#output
47 | output: {
48 |
49 | // The output directory as absolute path (required).
50 | //
51 | // See: http://webpack.github.io/docs/configuration.html#output-path
52 | path: helpers.root('dist'),
53 |
54 | // Specifies the name of each output file on disk.
55 | // IMPORTANT: You must not specify an absolute path here!
56 | //
57 | // See: http://webpack.github.io/docs/configuration.html#output-filename
58 | filename: '[name].[chunkhash].bundle.js',
59 |
60 | // The filename of the SourceMaps for the JavaScript files.
61 | // They are inside the output.path directory.
62 | //
63 | // See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
64 | sourceMapFilename: '[name].[chunkhash].bundle.map',
65 |
66 | // The filename of non-entry chunks as relative path
67 | // inside the output.path directory.
68 | //
69 | // See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
70 | chunkFilename: '[id].[chunkhash].chunk.js'
71 |
72 | },
73 |
74 | // Add additional plugins to the compiler.
75 | //
76 | // See: http://webpack.github.io/docs/configuration.html#plugins
77 | plugins: [
78 |
79 | // Plugin: WebpackMd5Hash
80 | // Description: Plugin to replace a standard webpack chunkhash with md5.
81 | //
82 | // See: https://www.npmjs.com/package/webpack-md5-hash
83 | new WebpackMd5Hash(),
84 |
85 | // Plugin: DedupePlugin
86 | // Description: Prevents the inclusion of duplicate code into your bundle
87 | // and instead applies a copy of the function at runtime.
88 | //
89 | // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
90 | // See: https://github.com/webpack/docs/wiki/optimization#deduplication
91 | new DedupePlugin(),
92 |
93 | // Plugin: DefinePlugin
94 | // Description: Define free variables.
95 | // Useful for having development builds with debug logging or adding global constants.
96 | //
97 | // Environment helpers
98 | //
99 | // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
100 | // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
101 | new DefinePlugin({
102 | 'ENV': JSON.stringify(METADATA.ENV),
103 | 'HMR': METADATA.HMR,
104 | 'process.env': {
105 | 'ENV': JSON.stringify(METADATA.ENV),
106 | 'NODE_ENV': JSON.stringify(METADATA.ENV),
107 | 'HMR': METADATA.HMR,
108 | }
109 | }),
110 |
111 |
112 | // Plugin: UglifyJsPlugin
113 | // Description: Minimize all JavaScript output of chunks.
114 | // Loaders are switched into minimizing mode.
115 | //
116 | // See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
117 | // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
118 | new UglifyJsPlugin({
119 | // beautify: true, //debug
120 | // mangle: false, //debug
121 | // dead_code: false, //debug
122 | // unused: false, //debug
123 | // deadCode: false, //debug
124 | // compress: {
125 | // screw_ie8: true,
126 | // keep_fnames: true,
127 | // drop_debugger: false,
128 | // dead_code: false,
129 | // unused: false
130 | // }, // debug
131 | // comments: true, //debug
132 |
133 | beautify: false, //prod
134 |
135 | mangle: {
136 | screw_ie8 : true,
137 | keep_fnames: true
138 | }, //prod
139 | /*
140 | mangle: {
141 | screw_ie8: true,
142 | except: [
143 | 'App',
144 | 'About',
145 | 'Contact',
146 | 'Home',
147 | 'Menu',
148 | 'Footer',
149 | 'XLarge',
150 | 'RouterActive',
151 | 'RouterLink',
152 | 'RouterOutlet',
153 | 'NgFor',
154 | 'NgIf',
155 | 'NgClass',
156 | 'NgSwitch',
157 | 'NgStyle',
158 | 'NgSwitchDefault',
159 | 'NgControl',
160 | 'NgControlName',
161 | 'NgControlGroup',
162 | 'NgFormControl',
163 | 'NgModel',
164 | 'NgFormModel',
165 | 'NgForm',
166 | 'NgSelectOption',
167 | 'DefaultValueAccessor',
168 | 'NumberValueAccessor',
169 | 'CheckboxControlValueAccessor',
170 | 'SelectControlValueAccessor',
171 | 'RadioControlValueAccessor',
172 | 'NgControlStatus',
173 | 'RequiredValidator',
174 | 'MinLengthValidator',
175 | 'MaxLengthValidator',
176 | 'PatternValidator',
177 | 'AsyncPipe',
178 | 'DatePipe',
179 | 'JsonPipe',
180 | 'NumberPipe',
181 | 'DecimalPipe',
182 | 'PercentPipe',
183 | 'CurrencyPipe',
184 | 'LowerCasePipe',
185 | 'UpperCasePipe',
186 | 'SlicePipe',
187 | 'ReplacePipe',
188 | 'I18nPluralPipe',
189 | 'I18nSelectPipe'
190 | ] // Needed for uglify RouterLink problem
191 | }, // prod
192 | */
193 | compress: {
194 | screw_ie8: true
195 | }, //prod
196 | comments: false //prod
197 | }),
198 |
199 | // Plugin: CompressionPlugin
200 | // Description: Prepares compressed versions of assets to serve
201 | // them with Content-Encoding
202 | //
203 | // See: https://github.com/webpack/compression-webpack-plugin
204 | new CompressionPlugin({
205 | regExp: /\.css$|\.html$|\.js$|\.map$/,
206 | threshold: 2 * 1024
207 | })
208 |
209 | ],
210 |
211 | // Static analysis linter for TypeScript advanced options configuration
212 | // Description: An extensible linter for the TypeScript language.
213 | //
214 | // See: https://github.com/wbuchwalter/tslint-loader
215 | tslint: {
216 | emitErrors: true,
217 | failOnHint: true,
218 | resourcePath: 'src'
219 | },
220 |
221 | // Html loader advanced options
222 | //
223 | // See: https://github.com/webpack/html-loader#advanced-options
224 | // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
225 | htmlLoader: {
226 | minimize: true,
227 | removeAttributeQuotes: false,
228 | caseSensitive: true,
229 | customAttrSurround: [
230 | [/#/, /(?:)/],
231 | [/\*/, /(?:)/],
232 | [/\[?\(?/, /(?:)/]
233 | ],
234 | customAttrAssign: [/\)?\]?=/]
235 | },
236 |
237 | node: {
238 | global: 'window',
239 | crypto: 'empty',
240 | process: false,
241 | module: false,
242 | clearImmediate: false,
243 | setImmediate: false
244 | }
245 | });
246 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://twitter.com/SwiftOnSecurity)
2 | [](https://github.com/auchenberg/volkswagen) [](https://badge.fury.io/gh/angularclass%2Fangular2-webpack-starter) [](https://david-dm.org/angularclass/angular2-webpack-starter)
3 | [](http://issuestats.com/github/angularclass/angular2-webpack-starter)
4 | [](http://issuestats.com/github/angularclass/angular2-webpack-starter) [](http://stackshare.io/angularclass/angular-2-webpack-starter)
5 |
6 |
7 |
8 | 
9 |
10 |
11 |
12 | # Angular2 Webpack Starter [](https://angularclass.com/slack-join) [](https://gitter.im/angularclass/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
13 |
14 |
15 | > An Angular 2 starter kit featuring [Angular 2](https://angular.io) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/),
16 | [Http](https://angular.io/docs/js/latest/api/http/),
17 | [Services](https://gist.github.com/gdi2290/634101fec1671ee12b3e#_follow_@AngularClass_on_twitter),
18 | [Tests](https://angular.io/docs/js/latest/api/test/), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Material](https://github.com/angular/material2), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [Istanbul](https://github.com/gotwarlost/istanbul), [TypeScript](http://www.typescriptlang.org/), [Typings](https://github.com/typings/typings), [TsLint](http://palantir.github.io/tslint/), [Codelyzer](https://github.com/mgechev/codelyzer), [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), and [Webpack](http://webpack.github.io/) by [AngularClass](https://angularclass.com).
19 |
20 | > If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angularclass/NG6-starter)
21 | > If you're looking to learn about Webpack and ES6 Build Tools check out [ES6-build-tools](https://github.com/AngularClass/ES6-build-tools)
22 | > If you're looking to learn TypeScript see [TypeStrong/learn-typescript](https://github.com/TypeStrong/learn-typescript)
23 | > If you're looking for Webpack 2 version then see the experimental version [angular2-webpack2-starter](https://github.com/gdi2290/angular2-webpack2-starter) that will be merged
24 | > If you're looking for something easier to get started with then see the offical angular2-seed that I also maintain [angular/angular2-seed](https://github.com/angular/angular2-seed)
25 |
26 | This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.
27 | * Best practices in file and application organization for Angular 2.
28 | * Ready to go build system using Webpack for working with TypeScript.
29 | * Angular 2 examples that are ready to go when experimenting with Angular 2.
30 | * A great Angular 2 seed repo for anyone who wants to start their project.
31 | * Testing Angular 2 code with Jasmine and Karma.
32 | * Coverage with Istanbul and Karma
33 | * End-to-end Angular 2 code using Protractor.
34 | * Type manager with Typings
35 | * Hot Module Replacement with Webpack
36 | * Material Design with [angular/material2](https://github.com/angular/material2)
37 |
38 | ### Quick start
39 | **Make sure you have node version >= 4.0**
40 | > Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts)
41 |
42 | ```bash
43 | # clone our repo
44 | # --depth 1 removes all but one .git commit history
45 | git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git
46 |
47 | # change directory to our repo
48 | cd angular2-webpack-starter
49 |
50 | # add required global libraries
51 | npm install typings webpack-dev-server rimraf webpack -g
52 |
53 | # install the repo with npm
54 | npm install
55 |
56 | # start the server
57 | npm start
58 |
59 | # use Hot Module Replacement
60 | npm run server:dev:hmr
61 | ```
62 | go to [http://0.0.0.0:3000](http://0.0.0.0:3000) or [http://localhost:3000](http://localhost:3000) in your browser
63 |
64 | # Nitrous Quickstart
65 |
66 | You can quickly create a free development environment to get started using this
67 | starter kit in the cloud on [Nitrous](https://www.nitrous.io/):
68 |
69 |
70 | 
71 |
72 |
73 | Simply run `HOST=0.0.0.0 npm start` from the terminal inside of
74 | `~/code/angular2-webpack-starter` and access your site via the "Preview > 3000"
75 | link in the IDE.
76 |
77 | # Table of Contents
78 | * [File Structure](#file-structure)
79 | * [Getting Started](#getting-started)
80 | * [Dependencies](#dependencies)
81 | * [Installing](#installing)
82 | * [Running the app](#running-the-app)
83 | * [Configuration](#configuration)
84 | * [Contributing](#contributing)
85 | * [TypeScript](#typescript)
86 | * [Typings](#typings)
87 | * [Frequently asked questions](#frequently-asked-questions)
88 | * [Support, Questions, or Feedback](#support-questions-or-feedback)
89 | * [License](#license)
90 |
91 |
92 | ## File Structure
93 | We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
94 | ```
95 | angular2-webpack-starter/
96 | ├──config/ * our configuration
97 | | ├──helpers.js * helper functions for our configuration files
98 | | ├──spec-bundle.js * ignore this magic that sets up our angular 2 testing environment
99 | | ├──karma.conf.js * karma config for our unit tests
100 | | ├──protractor.conf.js * protractor config for our end-to-end tests
101 | │ ├──webpack.dev.js * our development webpack config
102 | │ ├──webpack.prod.js * our production webpack config
103 | │ └──webpack.test.js * our testing webpack config
104 | │
105 | ├──src/ * our source files that will be compiled to javascript
106 | | ├──main.browser.ts * our entry file for our browser environment
107 | │ │
108 | | ├──index.html * Index.html: where we generate our index page
109 | │ │
110 | | ├──polyfills.ts * our polyfills file
111 | │ │
112 | | ├──vendor.ts * our vendor file
113 | │ │
114 | │ ├──app/ * WebApp: folder
115 | │ │ ├──app.spec.ts * a simple test of components in app.ts
116 | │ │ ├──app.e2e.ts * a simple end-to-end test for /
117 | │ │ └──app.ts * App.ts: a simple version of our App component components
118 | │ │
119 | │ └──assets/ * static assets are served here
120 | │ ├──icon/ * our list of icons from www.favicon-generator.org
121 | │ ├──service-worker.js * ignore this. Web App service worker that's not complete yet
122 | │ ├──robots.txt * for search engines to crawl your website
123 | │ └──human.txt * for humans to know who the developers are
124 | │
125 | │
126 | ├──tslint.json * typescript lint config
127 | ├──typedoc.json * typescript documentation generator
128 | ├──tsconfig.json * config that webpack uses for typescript
129 | ├──typings.json * our typings manager
130 | └──package.json * what npm uses to manage it's dependencies
131 | ```
132 |
133 | # Getting Started
134 | ## Dependencies
135 | What you need to run this app:
136 | * `node` and `npm` (`brew install node`)
137 | * Ensure you're running the latest versions Node `v4.1.x`+ and NPM `2.14.x`+
138 |
139 | Once you have those, you should install these globals with `npm install --global`:
140 | * `webpack` (`npm install --global webpack`)
141 | * `webpack-dev-server` (`npm install --global webpack-dev-server`)
142 | * `karma` (`npm install --global karma-cli`)
143 | * `protractor` (`npm install --global protractor`)
144 | * `typings` (`npm install --global typings`)
145 | * `typescript` (`npm install --global typescript`)
146 |
147 | ## Installing
148 | * `fork` this repo
149 | * `clone` your fork
150 | * `npm install` to install all dependencies
151 | * `typings install` to install necessary typings
152 | * `npm run server` to start the dev server in another tab
153 |
154 | ## Running the app
155 | After you have installed all dependencies you can now run the app. Run `npm run server` to start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://0.0.0.0:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`).
156 |
157 | ### server
158 | ```bash
159 | # development
160 | npm run server
161 | # production
162 | npm run build:prod
163 | npm run server:prod
164 | ```
165 |
166 | ## Other commands
167 |
168 | ### build files
169 | ```bash
170 | # development
171 | npm run build:dev
172 | # production
173 | npm run build:prod
174 | ```
175 |
176 | ### hot module replacement
177 | ```bash
178 | npm run server:dev:hmr
179 | ```
180 |
181 | ### watch and build files
182 | ```bash
183 | npm run watch
184 | ```
185 |
186 | ### run tests
187 | ```bash
188 | npm run test
189 | ```
190 |
191 | ### watch and run our tests
192 | ```bash
193 | npm run watch:test
194 | ```
195 |
196 | ### run end-to-end tests
197 | ```bash
198 | # make sure you have your server running in another terminal
199 | npm run e2e
200 | ```
201 |
202 | ### run webdriver (for end-to-end)
203 | ```bash
204 | npm run webdriver:update
205 | npm run webdriver:start
206 | ```
207 |
208 | ### run Protractor's elementExplorer (for end-to-end)
209 | ```bash
210 | npm run webdriver:start
211 | # in another terminal
212 | npm run e2e:live
213 | ```
214 |
215 | # Configuration
216 | Configuration files live in `config/` we are currently using webpack, karma, and protractor for different stages of your application
217 |
218 | # Contributing
219 | You can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request
220 |
221 | # TypeScript
222 | > To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
223 |
224 | ## Use latest TypeScript compiler
225 | TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
226 |
227 | ```
228 | npm install --global typescript
229 | ```
230 |
231 | ## Use a TypeScript-aware editor
232 | We have good experience using these editors:
233 |
234 | * [Visual Studio Code](https://code.visualstudio.com/)
235 | * [Webstorm 10](https://www.jetbrains.com/webstorm/download/)
236 | * [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
237 | * [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
238 |
239 | # Typings
240 | > When you include a module that doesn't include Type Definitions inside of the module you need to include external Type Definitions with Typings
241 |
242 | ## Use latest Typings module
243 | ```
244 | npm install --global typings
245 | ```
246 |
247 | ## Custom Type Definitions
248 | When including 3rd party modules you also need to include the type definition for the module
249 | if they don't provide one within the module. You can try to install it with typings
250 |
251 | ```
252 | typings install node --save
253 | ```
254 |
255 | If you can't find the type definition in the registry we can make an ambient definition in
256 | this file for now. For example
257 |
258 | ```typescript
259 | declare module "my-module" {
260 | export function doesSomething(value: string): string;
261 | }
262 | ```
263 |
264 |
265 | If you're prototyping and you will fix the types later you can also declare it as type any
266 |
267 | ```typescript
268 | declare var assert: any;
269 | ```
270 |
271 | If you're importing a module that uses Node.js modules which are CommonJS you need to import as
272 |
273 | ```typescript
274 | import * as _ from 'lodash';
275 | ```
276 |
277 | You can include your type definitions in this file until you create one for the typings registry
278 | see [typings/registry](https://github.com/typings/registry)
279 |
280 | # Frequently asked questions
281 | * What's the current browser support for Angular 2 Beta?
282 | * Please view the updated list of [browser support for Angular 2](https://github.com/angularclass/awesome-angular2#current-browser-support-for-angular-2)
283 | * Why is my service, aka provider, is not injecting parameter correctly?
284 | * Please use `@Injectable()` for your service for typescript to correctly attach the metadata (this is a TypeScript problem)
285 | * How do I run protractor with node 0.12.x?
286 | * please check out this repo to use the old version of protractor [#146](https://github.com/AngularClass/angular2-webpack-starter/pull/146/files)
287 | * Where do I write my tests?
288 | * You can write your tests next to your component files. See [`/src/app/home/home.spec.ts`](/src/app/home/home.spec.ts)
289 | * How do I start the app when I get `EACCES` and `EADDRINUSE` errors?
290 | * The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./dist/`
291 | * How to use `sass` for css?
292 | * `loaders: ['raw-loader','sass-loader']` and `@Component({ styles: [ require('./filename.scss') ] })` see issue [#136](https://github.com/AngularClass/angular2-webpack-starter/issues/136)
293 | * How do I test a Service?
294 | * See issue [#130](https://github.com/AngularClass/angular2-webpack-starter/issues/130#issuecomment-158872648)
295 | * How do I add `vscode-chrome-debug` support?
296 | * The VS Code chrome debug extension support can be done via `launch.json` see issue [#144](https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-164063790)
297 | * How do I make the repo work in a virtual machine?
298 | * You need to use `0.0.0.0` so revert these changes [#205](https://github.com/AngularClass/angular2-webpack-starter/pull/205/files)
299 | * What are the naming conventions for Angular 2?
300 | * please see issue [#185](https://github.com/AngularClass/angular2-webpack-starter/issues/185) and PR [196](https://github.com/AngularClass/angular2-webpack-starter/pull/196)
301 | * How do I include bootstrap or jQuery?
302 | * please see issue [#215](https://github.com/AngularClass/angular2-webpack-starter/issues/215) and [#214](https://github.com/AngularClass/angular2-webpack-starter/issues/214#event-511768416)
303 | * I'm getting an error about not finding my module that I installed?
304 | * please see [How to include or create custom type definitions](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-or-create-custom-type-definitions) and [custom-typings.d.ts](https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/custom-typings.d.ts)
305 | * How do I async load a component?
306 | * see wiki [How-do-I-async-load-a-component-with-AsyncRoute](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-do-I-async-load-a-component-with-AsyncRoute)
307 | * Error: Cannot find module 'tapable'
308 | * Remove `node_modules/` and run `npm cache clean` then `npm install`
309 | * What about Webpack 2?
310 | * If you're looking for Webpack 2 version then see the [experimental version](https://github.com/gdi2290/angular2-webpack2-starter) that will be merged soon.
311 | * How do I turn on Hot Module Replacement
312 | * Run `npm run server:dev:hmr`
313 | * `RangeError: Maximum call stack size exceeded`
314 | * This is a problem with minifying Angular 2 and it's recent JIT templates. If you set `mangle` to `false` then you should be good.
315 | * Why is the size of my app larger in development?
316 | * We are using inline source-maps and hot module replacement which will increase the bundle size.
317 |
318 | # Support, Questions, or Feedback
319 | > Contact us anytime for anything about this repo or Angular 2
320 |
321 | * [Chat: AngularClass.slack](http://angularclass.com/member-join/)
322 | * [Twitter: @AngularClass](https://twitter.com/AngularClass)
323 | * [Gitter: AngularClass/angular2-webpack-starter](https://gitter.im/angularclass/angular2-webpack-starter)
324 |
325 | ___
326 |
327 | enjoy — **AngularClass**
328 |
329 |
330 |
331 | [](https://angularclass.com)
332 | ##[AngularClass](https://angularclass.com)
333 | > Learn AngularJS, Angular 2, and Modern Web Development from the best.
334 | > Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com
335 |
336 | # License
337 | [MIT](/LICENSE)
338 |
--------------------------------------------------------------------------------