AoT support (#124)

with an example

.gitignore

@@ -26,6 +26,7 @@ coverage
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/
+compiled
 
 # Dependency directories
 node_modules
@@ -45,4 +46,4 @@ jspm_packages
 
 # IDEs
 .vscode/
-.idea/
+.idea/

.npmignore

@@ -1,5 +1,6 @@
 .github/
 build/tests/
+compiled/
 examples/
 src/
 tests/

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ### vNEXT
 
+- Added support for **Ahead of Time** compilation ([PR #124](https://github.com/apollostack/angular2-apollo/pull/124))
+
+
 ### v0.6.0
 
 - Added support for ApolloClient `v0.5.X` ([PR #])

examples/hello-world/.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/src/aot
 
 # dependencies
 /node_modules

examples/hello-world/package.json

@@ -4,29 +4,33 @@
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
+    "preclient": "npm run build",
     "start": "concurrently \"npm run server\" \"npm run client\"",
     "client": "ng serve --proxy-conf proxy.conf.json",
-    "server": "nodemon api/index.js --watch api --exec babel-node"
+    "server": "nodemon api/index.js --watch api --exec babel-node",
+    "build": "./node_modules/.bin/ngc -p src/tsconfig.aot.json"
   },
   "private": true,
   "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/router": "^3.0.0",
-    "angular2-apollo": "^0.5.0",
-    "apollo-client": "^0.4.16",
+    "@angular/common": "^2.1.0",
+    "@angular/compiler": "^2.1.0",
+    "@angular/compiler-cli": "^2.1.0",
+    "@angular/core": "^2.1.0",
+    "@angular/forms": "^2.1.0",
+    "@angular/http": "^2.1.0",
+    "@angular/platform-browser": "^2.1.0",
+    "@angular/platform-browser-dynamic": "^2.1.0",
+    "@angular/platform-server": "^2.1.0",
+    "@angular/router": "^3.1.0",
+    "angular2-apollo": "file:../../",
+    "apollo-client": "~0.5.0",
     "core-js": "^2.4.0",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "^5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.17"
   },
   "devDependencies": {
-    "@angular/platform-server": "^2.0.0",
+    "@types/es6-shim": "^0.31.32",
     "@types/isomorphic-fetch": "0.0.30",
     "@types/node": "^6.0.38",
     "angular-cli": "1.0.0-beta.11-webpack.8",
@@ -47,6 +51,6 @@
     "nodemon": "^1.10.2",
     "ts-node": "1.2.1",
     "tslint": "3.13.0",
-    "typescript": "2.0.0"
+    "typescript": "^2.0.6"
   }
 }

examples/hello-world/src/app/app.module.ts

@@ -19,4 +19,4 @@ import { client } from './client';
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

examples/hello-world/src/app/client.ts

@@ -1,9 +1,14 @@
-import { createNetworkInterface } from 'apollo-client';
+import { ApolloClient, createNetworkInterface } from 'apollo-client';
 
-import ApolloClient from 'apollo-client';
-
-export const client = new ApolloClient({
-  networkInterface: createNetworkInterface('/graphql', {
-    credentials: 'same-origin',
+const client = new ApolloClient({
+  networkInterface: createNetworkInterface({
+    uri: '/graphql',
+    opts: {
+      credentials: 'same-origin',
+    },
   }),
 });
+
+export {
+  client
+}

examples/hello-world/src/main.ts

@@ -1,6 +1,6 @@
 import './polyfills.ts';
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/';
+import { platformBrowser } from '@angular/platform-browser';
+import { AppModuleNgFactory } from './aot/app/app.module.ngfactory';
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

examples/hello-world/src/tsconfig.aot.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "isomorphic-fetch"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "angularCompilerOptions": {
+    "genDir": "aot",
+    "skipMetadataEmit" : true
+  }
+}

examples/hello-world/src/tsconfig.json

@@ -3,7 +3,7 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
+    "lib": ["es5", "dom"],
     "mapRoot": "./",
     "module": "es6",
     "moduleResolution": "node",

package.json

@@ -22,7 +22,7 @@
     "test-watch": "jest --watch",
     "remap": "remap-istanbul -i coverage/coverage-final.json -t lcovonly -o coverage/lcov.info",
     "lint": "tslint -e src/*.ts && tslint tests/*.ts ",
-    "build": "tsc",
+    "build": "./node_modules/.bin/ngc -p tsconfig.json",
     "clean": "rimraf build/* coverage/*",
     "prepublish": "npm run clean && npm run build"
   },
@@ -38,14 +38,16 @@
     "lodash.isequal": "^4.2.0"
   },
   "devDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/compiler": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/platform-browser": "^2.0.0",
-    "@angular/platform-browser-dynamic": "^2.0.0",
+    "@angular/common": "^2.1.0",
+    "@angular/compiler": "^2.1.0",
+    "@angular/compiler-cli": "^2.1.0",
+    "@angular/core": "^2.1.0",
+    "@angular/platform-browser": "^2.1.0",
+    "@angular/platform-browser-dynamic": "^2.1.0",
+    "@angular/platform-server": "^2.1.0",
     "@types/chai": "^3.4.33",
     "@types/es6-shim": "^0.31.32",
-    "@types/isomorphic-fetch": "0.0.30",
+    "@types/isomorphic-fetch": "^0.0.30",
     "@types/jest": "^15.1.32",
     "@types/lodash": "^4.14.34",
     "@types/node": "^6.0.38",
@@ -61,7 +63,7 @@
     "rxjs": "5.0.0-beta.12",
     "tslint": "^3.7.4",
     "typed-graphql": "^1.0.1",
-    "typescript": "^2.0.0",
+    "typescript": "^2.0.6",
     "validate-commit-msg": "^2.6.1",
     "zone.js": "^0.6.23"
   },

src/Angular2Apollo.ts

@@ -8,12 +8,12 @@ import { ApolloQueryObservable } from './ApolloQueryObservable';
 import 'rxjs/add/observable/from';
 
 export const angularApolloClient = new OpaqueToken('AngularApolloClient');
-export const defaultApolloClient = (client: ApolloClient): any => {
+export function defaultApolloClient(client: ApolloClient): any {
   return {
     provide: angularApolloClient,
     useValue: client,
   };
-};
+}
 
 @Injectable()
 export class Angular2Apollo {

tests/ApolloModule.spec.ts

@@ -6,7 +6,7 @@ import { ApolloModule, SelectPipe, Angular2Apollo } from '../src';
 import { angularApolloClient } from '../src/Angular2Apollo';
 
 describe('ApolloModule', () => {
-  let metadata: any = Reflect.getMetadata('annotations', ApolloModule)[0];
+  let metadata: any = ApolloModule['decorators'][0]['args'][0];
 
   it('should contain SelectPipe in declarations', () => {
     expect(include(metadata.declarations, SelectPipe)).toBe(true);

tests/_mocks.ts

@@ -3,7 +3,7 @@ import { ApolloClient } from 'apollo-client';
 import { GraphQLResult, Document } from 'graphql';
 import { print } from 'graphql-tag/printer';
 
-export default function mockNetworkInterface(
+export function mockNetworkInterface(
   ...mockedResponses: MockedResponse[]
 ): NetworkInterface {
   return new MockNetworkInterface(...mockedResponses);

tsconfig.json

@@ -17,5 +17,8 @@
     "tests/Angular2Apollo.spec.ts",
     "tests/SelectPipe.spec.ts",
     "tests/ApolloModule.spec.ts"
-   ]
+  ],
+  "angularCompilerOptions": {
+    "genDir": "compiled"
+  }
 }