Angular 4.1.0 + TypeScript 2.2.1 + Flex Layout Starter Kit

<!DOCTYPE html>
<html>

<head>
  <title>Angular 4.1.0 + TypeScript 2.2.1 Starter Kit</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/zone.js@0.8.5/dist/zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.10/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@0.20.12/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

# Angular 4.1.0 + TypeScript 2.2.1 + Flex Layout Plunker Starter Kit

Get your Angular on with Flex Layout and kick butt!

System.config({
  transpiler: "ts",
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  map: {
    app: "./src",
    '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js',
    '@angular/flex-layout': 'npm:@angular/flex-layout@2.0.0-beta.8/bundles/flex-layout.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@3.4.1/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js',
    'rxjs': 'npm:rxjs',
    'ts': 'npm:plugin-typescript@7.0.6',
    'typescript': 'npm:typescript@2.2.1'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    ts: {
      main: "lib/plugin.js"
    },
    typescript: {
      main: "lib/typescript.js",
      meta: {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  }
});

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

platformBrowserDynamic().bootstrapModule(AppModule)

import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from '@angular/flex-layout';

@Component({
  selector: 'my-app',
  template: `
    <h1>Row</h1>
    <div fxLayout="row" fxLayoutAlign="center center" class="row-example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    <h1>Column</h1>
    <div fxLayout="column" fxLayoutAlign="center stretch" class="column-example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  `,
  styleUrls: ['./src/styles.css']
})
export class App implements OnInit {
  constructor() {}
  
  ngOnInit() {}
}

@NgModule({
  imports: [ 
    BrowserModule,
    FlexLayoutModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

.row-example {
  border: 1px solid #000;
  height: 200px;
  
  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 0 16px;
  }
}

.column-example {
  border: 1px solid #000;
  padding: 16px;
  
  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }
}