feat(mobile): add support for generating App Shell in index.html

Author: jeffbcross

addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts

@@ -0,0 +1,27 @@
+import {provide} from '@angular/core';
+import {APP_BASE_HREF} from '@angular/common';
+import {<%= jsComponentName %>AppComponent} from './app/';
+import {
+  REQUEST_URL,
+  ORIGIN_URL
+} from 'angular2-universal';
+
+export const options = {
+  directives: [
+    // The component that will become the main App Shell
+    <%= jsComponentName %>AppComponent
+  ],
+  platformProviders: [
+    provide(ORIGIN_URL, {
+      useValue: ''
+    })
+  ],
+  providers: [
+    // What URL should Angular be treating the app as if navigating
+    provide(APP_BASE_HREF, {useValue: '/'}),
+    provide(REQUEST_URL, {useValue: '/'})
+  ],
+  async: true,
+  preboot: false
+};
+

addon/ng2/blueprints/ng2/files/__path__/app/__name__.component.ts

@@ -3,8 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: '<%= htmlComponentName %>-app',
-  templateUrl: '<%= htmlComponentName %>.component.html',
-  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']
+  <% if (isMobile) { %>template: `
+  <h1>
+    {{title}}
+  </h1>
+  `,
+  styles: []<% } else { %>templateUrl: '<%= htmlComponentName %>.component.html',
+  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %>
 })
 export class <%= jsComponentName %>AppComponent {
   title = '<%= htmlComponentName %> works!';

addon/ng2/blueprints/ng2/files/__path__/tsconfig.json

@@ -17,7 +17,8 @@
   },
 
   "files": [
-    "main.ts",
+    "main.ts",<% if (isMobile) { %>
+    "main-app-shell.ts",<% } %>
     "typings.d.ts"
   ]
 }

addon/ng2/blueprints/ng2/files/__path__/typings.d.ts

@@ -1,3 +1,2 @@
 /// <reference path="<%= refToTypings %>/typings/browser.d.ts" />
-
-declare var module: { id: string };
+<% if(!isMobile) { %>declare var module: { id: string };<% } %>

addon/ng2/blueprints/ng2/files/package.json

@@ -27,7 +27,11 @@
     "systemjs": "0.19.26",
     "zone.js": "^0.6.12"
   },
-  "devDependencies": {
+  "devDependencies": {<% if(isMobile) { %>
+    "@angular/platform-server": "2.0.0-rc.1",
+    "angular2-universal":"^0.100.3",
+    "angular2-universal-polyfills": "^0.4.1",
+    "preboot": "^2.0.10",<% } %>
     "angular-cli": "^<%= version %>",
     "clang-format": "^1.0.35",
     "codelyzer": "0.0.14",

addon/ng2/blueprints/ng2/files/typings.json

@@ -5,6 +5,7 @@
     "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
   },
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"<% if (isMobile) {%>,
+    "node": "registry:dt/node#4.0.0+20160509154515" <% } %>
   }
 }

lib/broccoli/angular2-app.js

@@ -139,12 +139,20 @@ class Angular2App extends BroccoliPlugin {
 
     var merged = new BroccoliMergeTrees(buildTrees, { overwrite: true });
 
+    if (this.ngConfig.apps[0].mobile) {
+      let AppShellPlugin = require('angular2-broccoli-prerender').AppShellPlugin;
+      merged = new BroccoliMergeTrees([merged, new AppShellPlugin(merged, 'index.html', 'main-app-shell')], {
+        overwrite: true
+      });
+    }
+
     if (loadEnvironment(this.project).production) {
       merged = this._getBundleTree(merged);
     }
 
     return new BroccoliFunnel(merged, {
-      destDir: this._destDir
+      destDir: this._destDir,
+      overwrite: true
     });
   }
 

package.json

@@ -30,6 +30,17 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/platform-server": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
+    "angular2-broccoli-prerender": "^0.11.0",
+    "angular2-service-worker": "0.1.11",
+    "angular2-universal": "^0.100.3",
+    "angular2-universal-polyfills": "^0.4.1",
     "broccoli": "^1.0.0-beta.7",
     "broccoli-caching-writer": "^2.2.1",
     "broccoli-concat": "^2.2.0",
@@ -40,20 +51,26 @@
     "chalk": "^1.1.3",
     "ember-cli": "2.5.0",
     "ember-cli-string-utils": "^1.0.0",
+    "es6-shim": "^0.35.0",
     "exit": "^0.1.2",
     "fs-extra": "^0.30.0",
     "glob": "^7.0.3",
     "handlebars": "^4.0.5",
     "leek": "0.0.21",
     "lodash": "^4.11.1",
     "opn": "4.0.1",
+    "preboot": "^2.0.10",
+    "reflect-metadata": "0.1.3",
     "resolve": "^1.1.7",
+    "rxjs": "^5.0.0-beta.6",
     "shelljs": "^0.7.0",
     "silent-error": "^1.0.0",
     "symlink-or-copy": "^1.0.3",
+    "systemjs": "0.19.26",
     "systemjs-builder": "^0.15.16",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1"
+    "typings": "^0.8.1",
+    "zone.js": "^0.6.12"
   },
   "ember-addon": {
     "paths": [