Feature/aot (johnpapa#87)

* 2.0.2

* aot

* more aot with gzip

* fix

* fix

* support sourcemaps for js

* css for mobile

* npm scripts

.gitignore

@@ -5,3 +5,5 @@ app/**/*.map
 node_modules
 jspm_packages
 bower_components
+aot/*
+dist/*

app/app.routing.ts → app/app-routing.module.ts

@@ -1,10 +1,11 @@
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { DashboardComponent } from './dashboard.component';
 import { HeroesComponent } from './heroes.component';
 import { HeroDetailComponent } from './hero-detail.component';
 
-const appRoutes: Routes = [
+const routes: Routes = [
   {
     path: '',
     redirectTo: '/dashboard',
@@ -24,6 +25,10 @@ const appRoutes: Routes = [
   }
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
 
 export const routedComponents = [DashboardComponent, HeroesComponent, HeroDetailComponent];

app/app.module.ts

@@ -3,20 +3,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
 import { InMemoryDataService } from './in-memory-data.service';
 
 import './rxjs-extensions';
 import { AppComponent } from './app.component';
-import { routing, routedComponents } from './app.routing';
+import { AppRoutingModule, routedComponents } from './app-routing.module';
 import { HeroService } from './hero.service';
 import { HeroSearchComponent } from './hero-search.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing,
+    AppRoutingModule,
     HttpModule,
     InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 600 })
   ],

app/dashboard.component.css

@@ -18,6 +18,7 @@ h3 {
 }
 .grid {
   margin: 0;
+  display: inline-block;
 }
 .col-1-4 {
   width: 25%;
@@ -50,7 +51,11 @@ h4 {
 @media (max-width: 600px) {
 	.module {
 	  font-size: 10px;
-	  max-height: 75px; }
+	  max-height: 75px;
+  }
+  .col-1-4 {
+    width: 50%;
+  }
 }
 @media (max-width: 1024px) {
 	.grid {

app/hero-search.component.css

@@ -12,4 +12,5 @@
 #search-box{
   width: 200px;
   height: 20px;
+  border: 1px solid lightgray;
 }

app/main-aot.ts

@@ -0,0 +1,7 @@
+import { platformBrowser }    from '@angular/platform-browser';
+
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
+  .then(success => console.log(`Bootstrap success`))
+  .catch(error => console.log(error));

gulpfile.js

@@ -0,0 +1,75 @@
+var gulp = require('gulp');
+var del = require('del');
+var $ = require('gulp-load-plugins')({ lazy: true });
+var lite = require('lite-server');
+
+var config = {
+  build: './dist/build.js',
+  plugins: [
+    'node_modules/core-js/client/shim.min.js',
+    'node_modules/zone.js/dist/zone.js'
+  ],
+  index: {
+    run: 'index.html',
+    aot: 'index-aot.html',
+    aotgz: 'index-aot-gzip.html',
+    jit: 'index-jit.html'
+  },
+  dest: './dist',
+  root: './'
+};
+
+gulp.task('help', $.taskListing);
+gulp.task('default', ['help']);
+
+gulp.task('gzip', function () {
+  log('gzipping');
+  var source = [].concat(config.plugins, config.build);
+
+  return gulp.src(source)
+    .pipe($.gzip())
+    .pipe(gulp.dest(config.dest));
+});
+
+gulp.task('copy-aot-gz', ['clean'], function () {
+  log('copy aot gz');
+  return copyIndex(config.index.aotgz);
+});
+
+gulp.task('copy-aot', ['clean'], function () {
+  log('copy aot');
+  return copyIndex(config.index.aot);
+});
+
+function copyIndex(source) {
+  return gulp.src(source)
+    .pipe($.rename(config.index.run))
+    .pipe(gulp.dest(config.root));
+}
+
+gulp.task('copy-jit', ['clean'], function () {
+  log('copy jit');
+  return copyIndex(config.index.jit);
+});
+
+gulp.task('clean', function (done) {
+  log('clean');
+  del([config.index.run]).then(paths => {
+    // console.log('Deleted files and folders:\n', paths.join('\n'));
+    done()
+  });
+});
+
+function log(msg) {
+  if (typeof (msg) === 'object') {
+    for (var item in msg) {
+      if (msg.hasOwnProperty(item)) {
+        $.util.log($.util.colors.blue(msg[item]));
+      }
+    }
+  } else {
+    $.util.log($.util.colors.blue(msg));
+  }
+}
+
+module.exports = gulp;

index-aot-gzip.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<base href="/">
+	<title>Angular Tour of Heroes</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="styles.css">
+	<script src="dist/shim.min.js.gz"></script>
+	<script src="dist/zone.js.gz"></script>
+
+	<!-- #docregion moduleId -->
+	<script>window.module = 'aot';</script>
+	<!-- #enddocregion moduleId -->
+</head>
+
+<body>
+	<my-app>Loading...</my-app>
+</body>
+<script src="dist/build.js.gz"></script>
+
+</html>

index-aot.html

@@ -0,0 +1,24 @@
+
+<!DOCTYPE html>
+<html>
+
+<head>
+	<base href="/">
+	<title>Angular Tour of Heroes</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="styles.css">
+	<script src="node_modules/core-js/client/shim.min.js"></script>
+	<script src="node_modules/zone.js/dist/zone.js"></script>
+
+	<!-- #docregion moduleId -->
+	<script>window.module = 'aot';</script>
+	<!-- #enddocregion moduleId -->
+</head>
+
+<body>
+	<my-app>Loading...</my-app>
+</body>
+<script src="dist/build.js"></script>
+
+</html>

index-jit.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <title>Angular 2 Tour of Heroes</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="styles.css">
+
+  <!-- IE required polyfills, in this exact order -->
+  <script src="node_modules/core-js/client/shim.min.js"></script>
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script>
+    System.import('system-config.js').then(function () {
+        System.import('main');
+      }).catch(console.error.bind(console));
+  </script>
+</head>
+
+<body>
+  <my-app>Loading...</my-app>
+</body>
+
+</html>

index.html

@@ -1,27 +1,24 @@
+
 <!DOCTYPE html>
 <html>
-<head>
-  <base href="/">
-  <title>Angular 2 Tour of Heroes</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="styles.css">
+<head>
+	<base href="/">
+	<title>Angular Tour of Heroes</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- IE required polyfills, in this exact order -->
-  <script src="node_modules/core-js/client/shim.min.js"></script>
-  <script src="node_modules/zone.js/dist/zone.js"></script>
-  <script src="node_modules/reflect-metadata/Reflect.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
+	<link rel="stylesheet" href="styles.css">
+	<script src="node_modules/core-js/client/shim.min.js"></script>
+	<script src="node_modules/zone.js/dist/zone.js"></script>
 
-  <script>
-    System.import('system-config.js').then(function () {
-        System.import('main');
-      }).catch(console.error.bind(console));
-  </script>
+	<!-- #docregion moduleId -->
+	<script>window.module = 'aot';</script>
+	<!-- #enddocregion moduleId -->
 </head>
 
 <body>
-  <my-app>Loading...</my-app>
+	<my-app>Loading...</my-app>
 </body>
+<script src="dist/build.js"></script>
 
 </html>

package.json

@@ -7,29 +7,44 @@
     "postinstall": "typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "typings": "typings"
+    "aot": "ngc -p tsconfig-aot.json",
+    "rollup": "rollup -c rollup-config.js",
+    "typings": "typings",
+    "aot-run": "npm run aot && npm run rollup && npm run lite"
   },
   "dependencies": {
-    "@angular/common": "~2.0.1",
-    "@angular/compiler": "~2.0.1",
-    "@angular/compiler-cli": "~0.6.3",
-    "@angular/core": "~2.0.1",
-    "@angular/forms": "~2.0.1",
-    "@angular/http": "~2.0.1",
-    "@angular/platform-browser": "~2.0.1",
-    "@angular/platform-browser-dynamic": "~2.0.1",
-    "@angular/router": "~3.0.1",
-    "@angular/upgrade": "~2.0.1",
+    "@angular/common": "~2.0.2",
+    "@angular/compiler": "~2.0.2",
+    "@angular/compiler-cli": "^0.6.4",
+    "@angular/core": "~2.0.2",
+    "@angular/forms": "~2.0.2",
+    "@angular/http": "~2.0.2",
+    "@angular/platform-browser": "~2.0.2",
+    "@angular/platform-browser-dynamic": "~2.0.2",
+    "@angular/platform-server": "^2.0.2",
+    "@angular/router": "~3.0.2",
+    "@angular/upgrade": "~2.0.2",
+    "angular-in-memory-web-api": "~0.1.5",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.39",
-    "zone.js": "^0.6.25",
-    "angular-in-memory-web-api": "0.1.3"
+    "zone.js": "^0.6.25"
   },
   "devDependencies": {
     "concurrently": "^3.0.0",
+    "del": "^2.2.2",
+    "gulp": "^3.9.1",
+    "gulp-gzip": "^1.4.0",
+    "gulp-load-plugins": "^1.3.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-task-listing": "^1.0.1",
+    "gulp-util": "^3.0.7",
     "lite-server": "^2.2.2",
+    "rollup": "^0.36.1",
+    "rollup-plugin-commonjs": "^5.0.4",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-uglify": "^1.0.1",
     "typescript": "^2.0.3",
     "typings": "^1.4.0"
   }

rollup-config.js

@@ -0,0 +1,22 @@
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+export default {
+  entry: 'app/main-aot.js',
+  dest: 'dist/build.js', // output a single application bundle
+  sourceMap: true,
+  sourceMapFile: 'dist/build.js.map',
+  format: 'iife',
+  plugins: [
+    nodeResolve({ jsnext: true, module: true }),
+    commonjs({
+      include: [
+        'node_modules/rxjs/**',
+        'node_modules/angular-in-memory-web-api/**'
+      ],
+    }),
+    uglify()
+  ]
+}

tsconfig-aot.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "types": []
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts",
+    "./typings/index.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}