Initial commit

.gitignore

@@ -0,0 +1,48 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Build result
+dist
+
+# Documentation
+docs
+
+# TypeScript definitions
+typings

.sass-lint.yml

@@ -0,0 +1,12 @@
+# Linter Options
+options:
+  # Don't merge default rules
+  merge-default-rules: false
+# File Options
+files:
+  include: 'src/**/*.s+(a|c)ss'
+# Rule Configuration
+rules:
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2

README.md

@@ -0,0 +1,5 @@
+# Angular 2 + Webpack boilerplate
+
+Work in progress.
+
+For now: run `npm install` and `npm start`, go to `http://localhost:9045/`.

karma.conf.js

@@ -0,0 +1,95 @@
+/**
+ * Please see Karma config file reference for better understanding:
+ * http://karma-runner.github.io/latest/config/configuration-file.html
+ */
+module.exports = function(config) {
+    config.set({
+        /**
+         * This path will be used for resolving.
+         */
+        basePath: '',
+
+        /**
+         * List of test frameworks we will use. Most of them are provided by separate packages (adapters).
+         * You can find them on npmjs.org: https://npmjs.org/browse/keyword/karma-adapter
+         */
+        frameworks: ['jasmine', 'source-map-support'],
+
+        /**
+         * Entry point / test environment builder is also written in TypeScript.
+         */
+        files: ['./tests/main.ts'],
+
+        /**
+         * Transform files before loading them.
+         */
+        preprocessors: {
+            './src/**/*.ts': [
+                'webpack',
+                'sourcemap',
+                'coverage'
+            ],
+            './tests/**/*.ts': [
+                'webpack'
+            ]
+        },
+
+        webpack: require('./webpack.config.test'),
+
+        /**
+         * Make dev server silent.
+         */
+        webpackServer: { noInfo: true },
+
+        /**
+         * A lot of plugins are available for test results reporting.
+         * You can find them here: https://npmjs.org/browse/keyword/karma-reporter
+         */
+        reporters: ['coverage', 'karma-remap-istanbul'],
+
+        /**
+         * Simple summary (printed to the console) and JSON file which we will remap back to TypeScript.
+         */
+        coverageReporter: {
+            dir: 'coverage',
+            reporters: [
+                { type: 'text-summary' },
+                {
+                    type: 'json',
+                    subdir: '.',
+                    file: 'coverage-final.json'
+                }
+            ]
+        },
+
+        /**
+         * Map code coverage result back to TypeScript using `karma-remap-istanbul`.
+         */
+        remapIstanbulReporter: {
+            src: 'coverage/coverage-final.json',
+            reports: {
+                lcovonly: 'coverage/lcov.info',
+                html: 'coverage/report'
+            },
+            timeoutNotCreated: 5000,
+            timeoutNoMoreFiles: 1000
+        },
+
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+
+        /**
+         * Only Phantom is used in this example.
+         * You can find more browser launchers here: https://npmjs.org/browse/keyword/karma-launcher
+         */
+        browsers: ['PhantomJS'],
+
+        /**
+         * This is CI mode: run once and exit.
+         * TODO: Non-CI mode
+         */
+        autoWatch: true,
+        singleRun: true
+    })
+};

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "angular2-webpack-boilerplate",
+  "version": "1.0.0",
+  "description": "A boilerplate for Angular 2 and Webpack",
+  "keywords": [
+    "angular2",
+    "webpack",
+    "typescript"
+  ],
+  "author": "Valentin Nazarov <[email protected]>",
+  "license": "MIT",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "clean": "rimraf ./node_modules ./docs ./typings ./coverage ./dist",
+    "clean:dist": "rimraf ./dist",
+    "lint": "npm run lint:ts && npm run lint:sass",
+    "lint:ts": "tslint src/**/*.ts tests/**/*.ts",
+    "lint:sass": "sass-lint",
+    "pretest": "npm run lint",
+    "test": "karma start",
+    "build": "webpack",
+    "postinstall": "typings install",
+    "docs": "npm run docs:typedoc && npm run docs:kss",
+    "docs:typedoc": "typedoc --options ./typedoc.json ./src/app",
+    "docs:kss": "kss --source ./src --destination ./docs/styleguide",
+    "start": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base ./dist"
+  },
+  "devDependencies": {
+    "@angular/common": "2.0.0-rc.2",
+    "@angular/compiler": "2.0.0-rc.2",
+    "@angular/core": "2.0.0-rc.2",
+    "@angular/http": "2.0.0-rc.2",
+    "@angular/platform-browser": "2.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
+    "@angular/platform-server": "2.0.0-rc.2",
+    "@angular/router": "2.0.0-rc.2",
+    "awesome-typescript-loader": "^1.1.1",
+    "codelyzer": "0.0.23",
+    "core-js": "^2.4.0",
+    "css-loader": "^0.23.1",
+    "es6-shim": "^0.35.1",
+    "file-loader": "^0.8.5",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.21.0",
+    "istanbul-instrumenter-loader": "^0.2.0",
+    "jasmine-core": "^2.4.1",
+    "json-loader": "^0.5.4",
+    "karma": "^0.13.22",
+    "karma-coverage": "^1.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-remap-istanbul": "^0.1.0",
+    "karma-source-map-support": "^1.1.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "kss": "^3.0.0-beta.14",
+    "node-sass": "^3.7.0",
+    "phantomjs-prebuilt": "^2.1.7",
+    "raw-loader": "^0.5.1",
+    "reflect-metadata": "^0.1.3",
+    "remap-istanbul": "^0.6.4",
+    "rimraf": "^2.5.2",
+    "rxjs": "5.0.0-beta.6",
+    "sass-lint": "^1.7.0",
+    "sass-loader": "^3.2.0",
+    "source-map-loader": "^0.1.5",
+    "style-loader": "^0.13.1",
+    "to-string-loader": "^1.1.4",
+    "ts-helpers": "^1.1.1",
+    "tslint": "^3.11.0",
+    "tslint-loader": "^2.1.4",
+    "typedoc": "^0.4.3",
+    "typescript": "^1.8.10",
+    "typings": "^1.3.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-md5-hash": "0.0.5",
+    "zone.js": "~0.6.12"
+  }
+}

src/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { AppService } from './app.service';
+
+@Component({
+    selector: 'da-app',
+    template: require('./app.html'),
+    styles: [
+        require('./app.scss')
+    ],
+    encapsulation: ViewEncapsulation.Native,
+    providers: [
+        AppService
+    ]
+})
+export class AppComponent {
+    constructor(public appService: AppService) {
+
+    }
+}

src/app/app.html

@@ -0,0 +1 @@
+<h1 class="app__title">{{ appService.getTitle() }}</h1>

src/app/app.scss

@@ -0,0 +1,16 @@
+$heading-color: #333;
+$heading-highlight-color: #fa2800;
+
+// App title
+//
+// :hover   - Highlights when hovering
+//
+// Styleguide base
+.app__title {
+  font-size: 4rem;
+  color: $heading-color;
+
+  &:hover {
+    color: $heading-highlight-color;
+  }
+}

src/app/app.service.ts

@@ -0,0 +1,7 @@
+export class AppService {
+    title: string = "Hello, world!";
+
+    public getTitle(): string {
+        return this.title;
+    }
+}

src/index.ejs

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title><%= webpackConfig.metadata.title %></title>
+
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <base href="<%= webpackConfig.metadata.baseUrl %>" />
+</head>
+<body>
+<da-app>Loading&hellip;</da-app>
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,13 @@
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+
+import { AppComponent } from './app/app.component';
+
+if (process.env.ENV === 'prod') {
+    enableProdMode();
+}
+
+/**
+ * TODO: Example service (HTTP interaction), routing, nested directives, pipe + related tests
+ */
+bootstrap(AppComponent);

src/polyfills.ts

@@ -0,0 +1,29 @@
+/**
+ * Use CoreJS polyfills.
+ */
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+
+/**
+ * Quote from docs: "A Zone is an execution context that persists across async tasks. You can think of it as
+ * thread-local storage for JavaScript VMs." Angular 2 uses this library.
+ * See details here: https://github.com/angular/zone.js/
+ */
+// TODO: Move to `vendor.ts`?
+import 'zone.js/dist/zone';
+
+/**
+ * This package helps to avoid generation of helper code in each file (e.g. for decorators).
+ * See details here: https://github.com/ngParty/ts-helpers
+ */
+import 'ts-helpers';
+
+if (process.env.ENV === 'production') {
+    // TODO: Either do something here or negate condition and remove `else`
+} else {
+    /**
+     * You can use `import` only in a namespace or module in TypeScript, so use `require` here.
+     */
+    Error['stackTraceLimit'] = Infinity;
+    require('zone.js/dist/long-stack-trace-zone');
+}

src/vendor.ts

@@ -0,0 +1,10 @@
+/**
+ * Angular 2 and RxJS.
+ */
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+import 'rxjs';

tests/app/app.component.spec.ts

@@ -0,0 +1,20 @@
+import {
+    beforeEachProviders,
+    it,
+    inject,
+    expect
+} from '@angular/core/testing';
+
+import { AppService } from '../../src/app/app.service';
+
+describe('App Service', () => {
+    beforeEachProviders(() => {
+        return [
+            AppService
+        ];
+    });
+
+    it('should return title', inject([AppService], (appService) => {
+        expect(appService.getTitle()).toBe('Hello, world!');
+    }));
+});