johnlindquist/angular2-minimal: null

/node_modules/
/dist/
/npm-debug.log
.idea/

# Angular 2 Minimal

Instructional purposes only. No production build included.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular 2 Lessons</title>
    <base href="/">
    <link rel="stylesheet"
          href="styles.css">
  </head>
  <body>

    <app>
      Loading...
    </app>

    <script src="/polyfills.bundle.js"></script>
    <script src="/rxjs.bundle.js"></script>
    <script src="/@angular.bundle.js"></script>
    <script src="/main.bundle.js"></script>
  </body>
</html>

{
  "name": "angular2-minimal",
  "version": "1.0.0",
  "description": "Minimal Angular 2 Setup",
  "scripts": {
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "watch": "npm run build -- --watch",
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base ./",
    "start": "npm run server"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.38",
    "awesome-typescript-loader": "^1.1.1",
    "typescript": "^2.0.2",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0",
    "webpack-merge": "^0.8.4"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "~0.6.23"
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 Lessons</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <script>
        var path = document.location.href.includes('plnkr')
                ? './'
                : '/';
        document.write('<base href="' + path + '"/>');
    </script>


    <link rel="stylesheet"
          href="styles.css">
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script>
        const app = {'app': 'src'};
        const npm = 'https://unpkg.com';
        const transpiler = 'ts';
        const typescriptOptions = {tsconfig: true};
        const meta = {'typescript': {"exports": "ts"}};
        const packages = {
            app: {
                main: './main.browser.ts',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        };

        const browserCompiler = {
            'ts': `${npm}/plugin-typescript@5.1.2/lib/plugin.js`,
            'typescript': `${npm}/typescript@2.0.2/lib/typescript.js`,
        };

        const dependencies = fetch('./package.json')
                .then(pkg => pkg.json())
                .then(body => body.dependencies);

        dependencies.then(deps => {
            const depInfo = Object.keys(deps)
                    .map(key => ({pkg: key, org: key.split('/')[0], repo: key.split('/')[1], version: deps[key]}));

            const ngInfo = depInfo.filter(info => info.org === '@angular')
                    .reduce((acc, {pkg, org, repo, version}) => Object.assign(acc, {
                        [`${pkg}`]: `${npm}/${pkg}@${version}/bundles/${repo}.umd.js`
                    }), {});

            const libInfo = depInfo.filter(info => info.org !== '@angular')
                    .reduce((acc, {pkg, org, repo, version}) => Object.assign(acc, {
                        [`${pkg}`]: `${npm}/${pkg}@${version}`
                    }), {});

               return {
                transpiler,
                typescriptOptions,
                meta,
                packages,
                map: Object.assign(app, browserCompiler, libInfo, ngInfo)
            };
        })
                .then(config => System.config(config))
                .then(()=> System.import('app'))
                .catch(function (err) {
                    console.error(err);
                });
    </script>
</head>
<body>
<app>Loading...</app>
</body>
</html>

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app";
import {FormsModule} from '@angular/forms';
@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    styles:[`
.completed{
    text-decoration: line-through;
}
`],
    template: `<div>

<input type="text" [(ngModel)]="message" (keyup.ENTER)="onEnter()">
{{message}}
<hr>

<ul>
    <li 
        *ngFor="let m of messages"
        [ngClass]="{'completed':m.completed}"
        (click)="m.completed = !m.completed"
        >{{m.message}}</li>
</ul>

</div>`
})
export class AppComponent {
    message = 'Amazing!';
    messages = [ ];

    onEnter(){
        this.messages.push(
            {
                message: this.message,
                completed: false
            }
        );
        this.message = "";
    }
}

import {AppModule} from './app/app.module';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

:root{
    font-family: Arial, serif;
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "types": [
      "core-js",
      "node"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

var webpack = require('webpack');
var path = require('path');
var pkg = require('./package.json');

function findPackages(selector) {
    return Object.keys(pkg.dependencies).filter(selector);
}

var entry = {
    'main': './src/main.browser.ts',
    '@angular': findPackages(pkg => pkg.startsWith('@angular')),
    'rxjs': findPackages(pkg => pkg.startsWith('rxjs')),
    'polyfills': findPackages(pkg => pkg.startsWith('reflect') || pkg.startsWith('core') || pkg.startsWith('zone')),
};

var webpackConfig = {
    entry,

    output: {
        path: './',
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.optimize.CommonsChunkPlugin({name: Object.keys(entry), minChunks: Infinity})
    ],
    module: {
        loaders: [
            {test: /\.ts$/, loaders: ['awesome-typescript-loader']}
        ]
    }

};

var defaultConfig = {
    devtool: 'cheap-module-source-map',
    cache: true,
    debug: true,
    output: {
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        root: [path.join(__dirname, 'src')],
        extensions: ['', '.ts', '.js']
    },

    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000}
    },

    node: {
        global: 1,
        crypto: 'empty',
        module: 0,
        Buffer: 0,
        clearImmediate: 0,
        setImmediate: 0
    }
};

var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);