Merge pull request #195 from apollostack/aot-2.3.1

Make it AoT 2.3.1+ compatible

Author: Urigo

.npmignore

@@ -1,17 +1,18 @@
 .github/
+.idea/
+.vscode/
 build/tests/
 compiled/
 examples/
 src/
 tests/
 typings/
+.bithoundrc
 .travis.yml
 .typingsrc
 CHANGELOG.md
 global.d.ts
-karma.conf.js
+rollup.conf.js
 tsconfig.json
+tsconfig.test.json
 tslint.json
-typings.json
-.idea/
-.vscode/

.travis.yml

@@ -11,6 +11,7 @@ cache:
     - $HOME/.npm
     - $HOME/.yarn-cache
     - node_modules
+    - examples/hello-world/node_modules
 
 notifications:
   # disable email notification
@@ -23,10 +24,15 @@ before_install:
   - yarn global add coveralls
   # remove unused node modules from cache
   - npm prune
+  - (cd examples/hello-world && npm prune)
 
-install: yarn
+install:
+  - yarn
+  - (cd examples/hello-world && npm i)
 
-script: yarn test
+script:
+  - yarn test
+  - (cd examples/hello-world && npm test)
 
 after_script:
   # send code-coverage report to coveralls

CHANGELOG.md

@@ -3,7 +3,7 @@
 ### vNEXT
 
 - Support `es6` modules and `tree-shaking` ([PR #151](https://github.com/apollostack/angular2-apollo/pull/151))
-- Make our `Ahead-of-Time` compilation compatible with Angular 2.3.0 ([PR #189](https://github.com/apollostack/angular2-apollo/pull/189))
+- Make our `Ahead-of-Time` compilation compatible with Angular 2.3.0 ([PR #189](https://github.com/apollostack/angular2-apollo/pull/189), [PR #195](https://github.com/apollostack/angular2-apollo/pull/195))
 
 ### v0.8.0
 

examples/hello-world/package.json

@@ -6,30 +6,31 @@
   "scripts": {
     "preclient": "npm run build",
     "start": "concurrently \"npm run server\" \"npm run client\"",
-    "client": "ng serve --proxy-conf proxy.conf.json",
+    "client": "ng serve --proxy-conf proxy.conf.json --port 4200",
     "server": "nodemon api/index.js --watch api --exec babel-node",
     "build": "./node_modules/.bin/ngc -p src/tsconfig.aot.json",
+    "test": "npm run build",
     "postbuild": "npm run tree-shaking",
     "tree-shaking": "node_modules/.bin/rollup -c rollup.config.js"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~2.1.2",
-    "@angular/compiler": "~2.1.2",
-    "@angular/compiler-cli": "~2.1.2",
-    "@angular/core": "~2.1.2",
-    "@angular/forms": "~2.1.2",
-    "@angular/http": "~2.1.2",
-    "@angular/platform-browser": "~2.1.2",
-    "@angular/platform-browser-dynamic": "~2.1.2",
-    "@angular/platform-server": "~2.1.2",
-    "@angular/router": "~3.1.2",
+    "@angular/common": "~2.3.1",
+    "@angular/compiler": "~2.3.1",
+    "@angular/compiler-cli": "~2.3.1",
+    "@angular/core": "~2.3.1",
+    "@angular/forms": "~2.3.1",
+    "@angular/http": "~2.3.1",
+    "@angular/platform-browser": "~2.3.1",
+    "@angular/platform-browser-dynamic": "~2.3.1",
+    "@angular/platform-server": "~2.3.1",
+    "@angular/router": "~3.3.1",
     "angular2-apollo": "file:../../",
     "apollo-client": "~0.5.1",
     "core-js": "~2.4.0",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.0.0-rc.4",
     "ts-helpers": "~1.1.1",
-    "zone.js": "~0.6.26"
+    "zone.js": "~0.7.2"
   },
   "devDependencies": {
     "@types/isomorphic-fetch": "0.0.30",

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

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ApolloModule } from 'angular2-apollo';
 
 import { AppComponent } from './app.component';
-import { client } from './client';
+import { getClient } from './client';
 
 @NgModule({
   declarations: [
@@ -15,7 +15,7 @@ import { client } from './client';
     FormsModule,
     ReactiveFormsModule,
     // Define the default ApolloClient
-    ApolloModule.withClient(client),
+    ApolloModule.withClient(getClient),
   ],
   bootstrap: [AppComponent],
 })

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

@@ -9,6 +9,6 @@ const client = new ApolloClient({
   }),
 });
 
-export {
-  client
+export function getClient(): ApolloClient {
+  return client;
 }

examples/hello-world/src/assets/.gitkeep

@@ -23,6 +23,7 @@
   ],
   "angularCompilerOptions": {
     "genDir": "aot",
-    "skipMetadataEmit" : true
+    "skipMetadataEmit" : true,
+    "entryModule": "app/app.module#AppModule"
   }
 }

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

@@ -17,5 +17,8 @@
       "node",
       "isomorphic-fetch"
     ]
-  }
+  },
+  "files": [
+    "main.ts"
+  ]
 }

examples/hello-world/src/tsconfig.json

@@ -39,13 +39,13 @@
     "apollo-client-rxjs": "~0.2.3"
   },
   "devDependencies": {
-    "@angular/common": "^2.3.0",
-    "@angular/compiler": "^2.3.0",
-    "@angular/compiler-cli": "^2.3.0",
-    "@angular/core": "^2.3.0",
-    "@angular/platform-browser": "^2.3.0",
-    "@angular/platform-browser-dynamic": "^2.3.0",
-    "@angular/platform-server": "^2.3.0",
+    "@angular/common": "^2.3.1",
+    "@angular/compiler": "^2.3.1",
+    "@angular/compiler-cli": "^2.3.1",
+    "@angular/core": "^2.3.1",
+    "@angular/platform-browser": "^2.3.1",
+    "@angular/platform-browser-dynamic": "^2.3.1",
+    "@angular/platform-server": "^2.3.1",
     "@types/chai": "^3.4.34",
     "@types/isomorphic-fetch": "^0.0.30",
     "@types/jest": "^15.1.32",

package.json

@@ -1,6 +1,6 @@
 import { OpaqueToken, Injectable, Inject } from '@angular/core';
 import { rxify } from 'apollo-client-rxjs';
-import { ApolloQueryResult, WatchQueryOptions, MutationOptions, SubscriptionOptions } from 'apollo-client';
+import { ApolloClient, ApolloQueryResult, WatchQueryOptions, MutationOptions, SubscriptionOptions } from 'apollo-client';
 import { Observable } from 'rxjs/Observable';
 import { FragmentDefinition } from 'graphql';
 
@@ -13,12 +13,13 @@ export interface DeprecatedWatchQueryOptions extends WatchQueryOptions {
   fragments?: FragmentDefinition[];
 }
 
-export const AngularApolloClient = new OpaqueToken('AngularApolloClient');
+export const ApolloClientWrapper = new OpaqueToken('ApolloClientWrapper');
+export const ApolloClientInstance = new OpaqueToken('ApolloClientInstance');
 
 @Injectable()
 export class Angular2Apollo {
   constructor(
-    @Inject(AngularApolloClient) private client: any,
+    @Inject(ApolloClientInstance) private client: ApolloClient,
   ) {}
 
   public watchQuery(options: DeprecatedWatchQueryOptions): ApolloQueryObservable<ApolloQueryResult> {

src/Angular2Apollo.ts

@@ -1,7 +1,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { ApolloClient } from 'apollo-client';
 
-import { Angular2Apollo, AngularApolloClient } from './Angular2Apollo';
+import { Angular2Apollo, ApolloClientWrapper, ApolloClientInstance } from './Angular2Apollo';
 import { SelectPipe } from './SelectPipe';
 
 export const APOLLO_DIRECTIVES = [
@@ -11,24 +11,34 @@ export const APOLLO_PROVIDERS = [
   Angular2Apollo,
 ];
 
-export function defaultApolloClient(client: ApolloClient): any {
-  return {
-    provide: AngularApolloClient,
-    useValue: client,
-  };
+export type ClientWrapper = () => ApolloClient;
+
+export function getApolloClient(clientFn: ClientWrapper): ApolloClient {
+  return clientFn();
+}
+
+export function defaultApolloClient(clientFn: ClientWrapper): any {
+  return [{
+    provide: ApolloClientWrapper,
+    useValue: clientFn,
+  }, {
+    provide: ApolloClientInstance,
+    useFactory: getApolloClient,
+    deps: [ApolloClientWrapper],
+  }];
 }
 
 @NgModule({
   declarations: APOLLO_DIRECTIVES,
   exports: APOLLO_DIRECTIVES,
 })
 export class ApolloModule {
-  public static withClient(client: ApolloClient): ModuleWithProviders {
+  public static withClient(clientFn: ClientWrapper): ModuleWithProviders {
     return {
       ngModule: ApolloModule,
       providers: [
         APOLLO_PROVIDERS,
-        defaultApolloClient(client),
+        defaultApolloClient(clientFn),
       ],
     };
   }

src/ApolloModule.ts

@@ -1,4 +1,4 @@
 export { SelectPipe } from './SelectPipe';
-export { Angular2Apollo, AngularApolloClient } from './Angular2Apollo';
+export { Angular2Apollo } from './Angular2Apollo';
 export { ApolloQueryObservable } from './ApolloQueryObservable';
 export { ApolloModule, APOLLO_PROVIDERS, APOLLO_DIRECTIVES, defaultApolloClient } from './ApolloModule';

src/index.ts

@@ -6,7 +6,7 @@ import { RxObservableQuery } from 'apollo-client-rxjs';
 
 import { mockClient } from './_mocks';
 import { APOLLO_PROVIDERS, defaultApolloClient } from '../src/index';
-import { Angular2Apollo, AngularApolloClient } from '../src/Angular2Apollo';
+import { Angular2Apollo, ApolloClientWrapper, ApolloClientInstance } from '../src/Angular2Apollo';
 
 import gql from 'graphql-tag';
 
@@ -66,7 +66,7 @@ describe('angular2Apollo', () => {
     let angular2Apollo;
 
     beforeEach(() => {
-      const injector = ReflectiveInjector.resolveAndCreate([defaultApolloClient(client), APOLLO_PROVIDERS]);
+      const injector = ReflectiveInjector.resolveAndCreate([defaultApolloClient(() => client), APOLLO_PROVIDERS]);
       angular2Apollo = injector.get(Angular2Apollo);
     });
 
@@ -245,9 +245,18 @@ describe('angular2Apollo', () => {
 
   describe('defaultApolloClient', () => {
 
-    it('should set a AngularApolloClient', () => {
-      const injector = ReflectiveInjector.resolveAndCreate([defaultApolloClient(client)]);
-      expect(injector.get(AngularApolloClient)).toBe(client);
+    function getClient() {
+      return client;
+    }
+
+    it('should set a ApolloClientWrapper', () => {
+      const injector = ReflectiveInjector.resolveAndCreate([defaultApolloClient(getClient)]);
+      expect(injector.get(ApolloClientWrapper)).toBe(getClient);
+    });
+
+    it('should set a ApolloClientInstance', () => {
+      const injector = ReflectiveInjector.resolveAndCreate([defaultApolloClient(getClient)]);
+      expect(injector.get(ApolloClientInstance)).toBe(client);
     });
   });
 });

tests/Angular2Apollo.spec.ts

@@ -3,7 +3,7 @@ import { ApolloClient } from 'apollo-client';
 import './_common';
 
 import { ApolloModule, SelectPipe, Angular2Apollo } from '../src';
-import { AngularApolloClient } from '../src/Angular2Apollo';
+import { ApolloClientWrapper, ApolloClientInstance } from '../src/Angular2Apollo';
 
 describe('ApolloModule', () => {
   let metadata: any = ApolloModule['decorators'][0]['args'][0];
@@ -30,18 +30,26 @@ describe('ApolloModule', () => {
 
   describe('withClient', () => {
     const client = {} as ApolloClient;
-    const result = ApolloModule.withClient(client);
+    const getClient = () => client;
+    const result = ApolloModule.withClient(getClient);
+    const providers = result.providers[1]; // skips APOLLO_PROVIDERS
 
     it('should contain ApolloModule as ngModule', () => {
       expect(result.ngModule).toBe(ApolloModule);
     });
 
-    it('should contain provider with useValue', () => {
-      expect(result.providers[1]['useValue']).toBe(client);
+    it('should provide a wrapper directly', () => {
+      expect(providers[0]['provide']).toBe(ApolloClientWrapper);
+      expect(providers[0]['useValue']).toBe(getClient);
     });
 
-    it('should contain provider that provide AngularApolloClient', () => {
-      expect(result.providers[1]['provide']).toBe(AngularApolloClient);
+    it('should provide a value using factory', () => {
+      const factoryResult = providers[1]['useFactory'](getClient);
+
+      expect(providers[1]['provide']).toBe(ApolloClientInstance);
+      expect(providers[1]['useFactory']).toBeDefined();
+      expect(providers[1]['deps'][0]).toBe(ApolloClientWrapper);
+      expect(factoryResult).toBe(client);
     });
   });
 });