From f940b585a5b127cab6a80909227a03e94ee0f78d Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@ster-project.pl>
Date: Fri, 12 Aug 2016 14:18:05 +0200
Subject: [PATCH 1/2] feat: Add ApolloModule

---
 CHANGELOG.md        |  2 ++
 package.json        | 12 ++++++------
 src/apolloModule.ts | 25 +++++++++++++++++++++++++
 src/index.ts        |  5 +++++
 4 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/apolloModule.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffe579543..39632f3fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ### vNEXT
 
+- Added `ApolloModule` (with RC5 of Angular2 comes NgModules) ([PR #63](https://github.com/apollostack/angular2-apollo/pull/63))
+
 ### v0.4.2
 
 - Added `fetchMore` support ([PR #58](https://github.com/apollostack/angular2-apollo/pull/58))
diff --git a/package.json b/package.json
index b77af5453..e2081ba67 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "apollo-client": "^0.3.0 || ^0.4.0",
-    "@angular/core": "^2.0.0-rc.1",
+    "@angular/core": "^2.0.0-rc.5",
     "rxjs": "^5.0.0-beta.6"
   },
   "dependencies": {
@@ -40,11 +40,11 @@
     "lodash.isequal": "^4.2.0"
   },
   "devDependencies": {
-    "@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/common": "^2.0.0-rc.5",
+    "@angular/compiler": "^2.0.0-rc.5",
+    "@angular/core": "^2.0.0-rc.5",
+    "@angular/platform-browser": "^2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
     "apollo-client": "^0.4.11",
     "es6-shim": "^0.35.0",
     "ghooks": "^1.2.1",
diff --git a/src/apolloModule.ts b/src/apolloModule.ts
new file mode 100644
index 000000000..e348d6fa0
--- /dev/null
+++ b/src/apolloModule.ts
@@ -0,0 +1,25 @@
+import {
+  NgModule,
+  ModuleWithProviders,
+} from '@angular/core';
+
+import ApolloClient from 'apollo-client';
+
+import {
+  angularApolloClient,
+  Angular2Apollo,
+} from './angular2Apollo';
+
+@NgModule({
+  providers: [Angular2Apollo],
+})
+export class ApolloModule {
+  public static withClient(client: ApolloClient): ModuleWithProviders {
+    return {
+      ngModule: ApolloModule,
+      providers: [
+        { provide: angularApolloClient, useValue: client },
+      ],
+    };
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 57c2eda2c..0bff10558 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,12 +16,17 @@ import {
   ApolloQueryObservable,
 } from './apolloQueryObservable';
 
+import {
+  ApolloModule,
+} from './apolloModule';
+
 export const APOLLO_PROVIDERS: any[] = [
   Angular2Apollo,
 ];
 
 export {
   Apollo,
+  ApolloModule,
   ApolloQuery,
   ApolloQueryObservable,
   ApolloQueryPipe,

From aa7bd6fd4700d38092de6a37cfc91b8d42560525 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@ster-project.pl>
Date: Fri, 12 Aug 2016 14:54:52 +0200
Subject: [PATCH 2/2] docs(examples): update to RC5

---
 .../hello-world/.meteor/.finished-upgraders   |   1 +
 examples/hello-world/.meteor/packages         |  24 ++--
 examples/hello-world/.meteor/release          |   2 +-
 examples/hello-world/.meteor/versions         |  46 +++----
 .../{main.html => imports/app.component.html} |   8 +-
 .../client/imports/app.component.ts           |  83 +++++++++++++
 .../hello-world/client/imports/app.module.ts  |  18 +++
 examples/hello-world/client/imports/client.ts |   7 ++
 .../client/imports/email.interface.ts         |   4 +
 .../client/imports/user.interface.ts          |   7 ++
 examples/hello-world/client/index.html        |   5 +-
 examples/hello-world/client/index.ts          |  10 ++
 examples/hello-world/client/main.ts           | 112 ------------------
 examples/hello-world/custom.d.ts              |   4 +
 examples/hello-world/package.json             |  13 +-
 examples/hello-world/tsconfig.json            |   3 +-
 examples/hello-world/typings.json             |   4 +-
 examples/hello-world/typings/index.d.ts       |   2 +
 18 files changed, 191 insertions(+), 162 deletions(-)
 rename examples/hello-world/client/{main.html => imports/app.component.html} (69%)
 create mode 100644 examples/hello-world/client/imports/app.component.ts
 create mode 100644 examples/hello-world/client/imports/app.module.ts
 create mode 100644 examples/hello-world/client/imports/client.ts
 create mode 100644 examples/hello-world/client/imports/email.interface.ts
 create mode 100644 examples/hello-world/client/imports/user.interface.ts
 create mode 100644 examples/hello-world/client/index.ts
 delete mode 100644 examples/hello-world/client/main.ts
 create mode 100644 examples/hello-world/custom.d.ts

diff --git a/examples/hello-world/.meteor/.finished-upgraders b/examples/hello-world/.meteor/.finished-upgraders
index dacc2c0d7..11fc14e30 100644
--- a/examples/hello-world/.meteor/.finished-upgraders
+++ b/examples/hello-world/.meteor/.finished-upgraders
@@ -11,3 +11,4 @@ notices-for-facebook-graph-api-2
 1.2.0-cordova-changes
 1.2.0-breaking-changes
 1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
diff --git a/examples/hello-world/.meteor/packages b/examples/hello-world/.meteor/packages
index 476dbb9ba..d1d1d420a 100644
--- a/examples/hello-world/.meteor/packages
+++ b/examples/hello-world/.meteor/packages
@@ -4,18 +4,18 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base             # Packages every Meteor app needs to have
-mobile-experience       # Packages for a great mobile UX
-mongo                   # The database Meteor supports right now
-reactive-var            # Reactive variable for tracker
-jquery                  # Helpful client-side library
-tracker                 # Meteor's client-side reactive programming library
+meteor-base@1.0.4             # Packages every Meteor app needs to have
+mobile-experience@1.0.4       # Packages for a great mobile UX
+mongo@1.1.10                   # The database Meteor supports right now
+reactive-var@1.0.10            # Reactive variable for tracker
+jquery@1.11.9                  # Helpful client-side library
+tracker@1.1.0                 # Meteor's client-side reactive programming library
 
-standard-minifier-css   # CSS minifier run for production mode
-standard-minifier-js    # JS minifier run for production mode
-es5-shim                # ECMAScript 5 compatibility for older browsers.
-ecmascript              # Enable ECMAScript2015+ syntax in app code
+standard-minifier-css@1.1.8   # CSS minifier run for production mode
+standard-minifier-js@1.1.8    # JS minifier run for production mode
+es5-shim@4.6.13                # ECMAScript 5 compatibility for older browsers.
+ecmascript@0.5.7              # Enable ECMAScript2015+ syntax in app code
 
-autopublish             # Publish all data to the clients (for prototyping)
-insecure                # Allow all DB writes from clients (for prototyping)
+autopublish@1.0.7             # Publish all data to the clients (for prototyping)
+insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
 angular2-compilers
diff --git a/examples/hello-world/.meteor/release b/examples/hello-world/.meteor/release
index e5b4dc180..c85944c1d 100644
--- a/examples/hello-world/.meteor/release
+++ b/examples/hello-world/.meteor/release
@@ -1 +1 @@
-METEOR@1.3.4.4
+METEOR@1.4.0.1
diff --git a/examples/hello-world/.meteor/versions b/examples/hello-world/.meteor/versions
index 48119a5d3..37208ef6b 100644
--- a/examples/hello-world/.meteor/versions
+++ b/examples/hello-world/.meteor/versions
@@ -1,13 +1,13 @@
 allow-deny@1.0.5
-angular2-compilers@0.6.0
+angular2-compilers@0.6.1
 autopublish@1.0.7
 autoupdate@1.2.11
-babel-compiler@6.8.4
-babel-runtime@0.1.9_1
+babel-compiler@6.9.0
+babel-runtime@0.1.10
 barbatus:css-compiler@0.3.0
 barbatus:scss-compiler@3.8.1_1
-barbatus:typescript@0.3.3
-barbatus:typescript-compiler@0.6.1
+barbatus:typescript@0.4.1
+barbatus:typescript-compiler@0.7.1_1
 barbatus:typescript-runtime@0.1.2
 base64@1.0.9
 binary-heap@1.0.9
@@ -20,13 +20,13 @@ check@1.2.3
 ddp@1.2.5
 ddp-client@1.2.9
 ddp-common@1.2.6
-ddp-server@1.2.9
+ddp-server@1.2.10
 deps@1.0.12
 diff-sequence@1.0.6
-ecmascript@0.4.7
-ecmascript-runtime@0.2.12
+ecmascript@0.5.7
+ecmascript-runtime@0.3.13
 ejson@1.0.12
-es5-shim@4.5.13
+es5-shim@4.6.13
 fastclick@1.0.12
 geojson-utils@1.0.9
 hot-code-push@1.0.4
@@ -38,22 +38,22 @@ insecure@1.0.7
 jquery@1.11.9
 launch-screen@1.0.12
 livedata@1.0.18
-logging@1.0.14
-meteor@1.1.16
+logging@1.1.14
+meteor@1.2.16
 meteor-base@1.0.4
-minifier-css@1.1.13
-minifier-js@1.1.13
+minifier-css@1.2.13
+minifier-js@1.2.13
 minimongo@1.0.17
 mobile-experience@1.0.4
 mobile-status-bar@1.0.12
-modules@0.6.5
-modules-runtime@0.6.5
-mongo@1.1.9_1
+modules@0.7.5
+modules-runtime@0.7.5
+mongo@1.1.10
 mongo-id@1.0.5
-npm-mongo@1.4.45
+npm-mongo@1.5.45
 observe-sequence@1.0.12
 ordered-dict@1.0.8
-promise@0.7.3
+promise@0.8.3
 random@1.0.10
 reactive-var@1.0.10
 reload@1.1.10
@@ -61,12 +61,12 @@ retry@1.0.8
 routepolicy@1.0.11
 spacebars@1.0.12
 spacebars-compiler@1.0.12
-standard-minifier-css@1.0.8
-standard-minifier-js@1.0.8
-tracker@1.0.14
+standard-minifier-css@1.1.8
+standard-minifier-js@1.1.8
+tracker@1.1.0
 ui@1.0.11
 underscore@1.0.9
-urigo:static-html-compiler@0.1.4
+urigo:static-html-compiler@0.1.8
 url@1.0.10
-webapp@1.2.10
+webapp@1.3.10
 webapp-hashing@1.0.9
diff --git a/examples/hello-world/client/main.html b/examples/hello-world/client/imports/app.component.html
similarity index 69%
rename from examples/hello-world/client/main.html
rename to examples/hello-world/client/imports/app.component.html
index 28628042a..32ac6d206 100644
--- a/examples/hello-world/client/main.html
+++ b/examples/hello-world/client/imports/app.component.html
@@ -9,10 +9,8 @@ <h2>List</h2>
 
 <input type="search" placeholder="Type name..." [(ngModel)]="nameFilter" />
 
-<div *ngIf="data.loading">loading ...</div>
-
-<ul *ngIf="!data.loading">
-  <li *ngFor="let user of data.users">
-    {{ user.firstName }} {{ user.lastName }}
+<ul>
+  <li *ngFor="let user of data | async | apolloQuery: 'users'">
+    {{user.firstName}} {{user.lastName}}
   </li>
 </ul>
diff --git a/examples/hello-world/client/imports/app.component.ts b/examples/hello-world/client/imports/app.component.ts
new file mode 100644
index 000000000..e8adeb895
--- /dev/null
+++ b/examples/hello-world/client/imports/app.component.ts
@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+import { Angular2Apollo, ApolloQueryPipe, ApolloQueryObservable } from 'angular2-apollo';
+import { ApolloQueryResult } from 'apollo-client';
+
+import { User } from './user.interface';
+
+import gql from 'graphql-tag';
+
+import template from './app.component.html';
+
+interface Data {
+  users: User[];
+}
+
+@Component({
+  selector: 'app',
+  template,
+  pipes: [ApolloQueryPipe],
+})
+export class AppComponent implements OnInit {
+  data: ApolloQueryObservable<Data>;
+  firstName: string;
+  lastName: string;
+  nameFilter: string;
+
+  constructor(private angular2Apollo: Angular2Apollo) {}
+
+  ngOnInit() {
+    this.data = this.angular2Apollo.watchQuery({
+      query: gql`
+        query getUsers($name: String) {
+          users(name: $name) {
+            firstName
+            lastName
+            emails {
+              address
+              verified
+            }
+          }
+        }
+      `,
+      variables: {
+        name: this.nameFilter,
+      },
+    });
+  }
+
+  newUser(firstName: string) {
+    this.angular2Apollo.mutate({
+      mutation: gql`
+        mutation addUser(
+          $firstName: String!
+          $lastName: String!
+        ) {
+          addUser(
+            firstName: $firstName
+            lastName: $lastName
+          ) {
+            firstName
+            lastName,
+            emails {
+              address
+              verified
+            }
+          }
+        }
+      `,
+      variables: {
+        firstName,
+        lastName: this.lastName,
+      },
+    })
+      .then(({ data }: ApolloQueryResult) => {
+        console.log('got data', data);
+
+        // get new data
+        this.data.refetch();
+      })
+      .catch((errors: any) => {
+        console.log('there was an error sending the query', errors);
+      });
+  }
+}
diff --git a/examples/hello-world/client/imports/app.module.ts b/examples/hello-world/client/imports/app.module.ts
new file mode 100644
index 000000000..650da81e4
--- /dev/null
+++ b/examples/hello-world/client/imports/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { ApolloModule } from 'angular2-apollo';
+
+import { AppComponent } from './app.component';
+import { client } from './client';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ApolloModule.withClient(client),
+  ],
+  bootstrap: [ AppComponent ],
+})
+export class AppModule {}
diff --git a/examples/hello-world/client/imports/client.ts b/examples/hello-world/client/imports/client.ts
new file mode 100644
index 000000000..e80882ac2
--- /dev/null
+++ b/examples/hello-world/client/imports/client.ts
@@ -0,0 +1,7 @@
+import { createNetworkInterface } from 'apollo-client';
+
+import ApolloClient from 'apollo-client';
+
+export const client = new ApolloClient({
+  networkInterface: createNetworkInterface('/graphql'),
+});
diff --git a/examples/hello-world/client/imports/email.interface.ts b/examples/hello-world/client/imports/email.interface.ts
new file mode 100644
index 000000000..2da0654f6
--- /dev/null
+++ b/examples/hello-world/client/imports/email.interface.ts
@@ -0,0 +1,4 @@
+export interface Email {
+  address: string;
+  verified: boolean;
+};
diff --git a/examples/hello-world/client/imports/user.interface.ts b/examples/hello-world/client/imports/user.interface.ts
new file mode 100644
index 000000000..550aab1bf
--- /dev/null
+++ b/examples/hello-world/client/imports/user.interface.ts
@@ -0,0 +1,7 @@
+import { Email } from './email.interface';
+
+export interface User {
+  firstName: string;
+  lastName: string;
+  emails: Email[];
+}
diff --git a/examples/hello-world/client/index.html b/examples/hello-world/client/index.html
index 2662e565b..e120a50dd 100644
--- a/examples/hello-world/client/index.html
+++ b/examples/hello-world/client/index.html
@@ -1,3 +1,6 @@
+<head>
+  <title>Hello World</title>
+</head>
 <body>
   <app></app>
-</body>
\ No newline at end of file
+</body>
diff --git a/examples/hello-world/client/index.ts b/examples/hello-world/client/index.ts
new file mode 100644
index 000000000..7e2d19c1d
--- /dev/null
+++ b/examples/hello-world/client/index.ts
@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import 'rxjs';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './imports/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/examples/hello-world/client/main.ts b/examples/hello-world/client/main.ts
deleted file mode 100644
index c94fd4ec7..000000000
--- a/examples/hello-world/client/main.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import 'reflect-metadata';
-import 'rxjs';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/long-stack-trace-zone';
-
-import {
-  bootstrap,
-} from '@angular/platform-browser-dynamic';
-
-import {
-  Component,
-} from '@angular/core';
-
-import {
-  Apollo,
-  ApolloQuery,
-} from 'angular2-apollo';
-
-import ApolloClient, {
-  createNetworkInterface,
-} from 'apollo-client';
-
-import gql from 'graphql-tag';
-
-import {
-  ApolloQueryResult,
-} from 'apollo-client';
-
-import template from './main.html';
-
-const client = new ApolloClient({
-  networkInterface: createNetworkInterface('/graphql'),
-});
-
-@Component({
-  selector: 'app',
-  template,
-})
-@Apollo({
-  client,
-  queries(component: Main) {
-    return {
-      data: {
-        query: gql`
-          query getUsers($name: String) {
-            users(name: $name) {
-              firstName
-              lastName
-              emails {
-                address
-                verified
-              }
-            }
-          }
-        `,
-        variables: {
-          name: component.nameFilter,
-        },
-      },
-    };
-  },
-  mutations(component: Main) {
-    return {
-      addUser: (firstName: string) => ({
-        mutation: gql`
-          mutation addUser(
-            $firstName: String!
-            $lastName: String!
-          ) {
-            addUser(
-              firstName: $firstName
-              lastName: $lastName
-            ) {
-              firstName
-              lastName,
-              emails {
-                address
-                verified
-              }
-            }
-          }
-        `,
-        variables: {
-          firstName,
-          lastName: component.lastName,
-        },
-      }),
-    };
-  },
-})
-class Main {
-  public data: ApolloQuery;
-  public firstName: string;
-  public lastName: string;
-  public nameFilter: string;
-  public addUser: (firstName: string) => Promise<ApolloQueryResult>;
-
-  public newUser(firstName: string) {
-    this.addUser(firstName)
-      .then(({ data }: ApolloQueryResult) => {
-        console.log('got data', data);
-
-        // get new data
-        this.data.refetch();
-      })
-      .catch((errors: any) => {
-        console.log('there was an error sending the query', errors);
-      });
-  }
-}
-
-bootstrap(Main);
diff --git a/examples/hello-world/custom.d.ts b/examples/hello-world/custom.d.ts
new file mode 100644
index 000000000..15d69e19e
--- /dev/null
+++ b/examples/hello-world/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const template: string;
+  export default template;
+}
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
index 958e4cd36..39711cc75 100644
--- a/examples/hello-world/package.json
+++ b/examples/hello-world/package.json
@@ -6,13 +6,14 @@
     "dev": "rimraf node_modules/angular2-apollo && npm i && npm start"
   },
   "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/common": "^2.0.0-rc.5",
+    "@angular/compiler": "^2.0.0-rc.5",
+    "@angular/core": "^2.0.0-rc.5",
+    "@angular/forms": "^0.3.0",
+    "@angular/platform-browser": "^2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
     "angular2-apollo": "file:../../",
-    "apollo-client": "^0.4.1",
+    "apollo-client": "^0.4.11",
     "casual-browserify": "^1.5.2",
     "es6-shim": "^0.35.1",
     "express": "^4.13.4",
diff --git a/examples/hello-world/tsconfig.json b/examples/hello-world/tsconfig.json
index 597c2ebad..015ff9463 100644
--- a/examples/hello-world/tsconfig.json
+++ b/examples/hello-world/tsconfig.json
@@ -9,6 +9,7 @@
   },
   "files": [
     "typings/index.d.ts",
-    "client/main.ts"
+    "custom.d.ts",
+    "client/index.ts"
   ]
 }
diff --git a/examples/hello-world/typings.json b/examples/hello-world/typings.json
index af3298ff8..d1654d0db 100644
--- a/examples/hello-world/typings.json
+++ b/examples/hello-world/typings.json
@@ -3,6 +3,8 @@
     "graphql": "registry:npm/graphql#0.5.0+20160602041655"
   },
   "globalDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
+    "isomorphic-fetch": "registry:dt/isomorphic-fetch#0.0.0+20160524142046",
+    "node": "registry:env/node#6.0.0+20160723033700"
   }
 }
diff --git a/examples/hello-world/typings/index.d.ts b/examples/hello-world/typings/index.d.ts
index 88fee2a70..124588ce0 100644
--- a/examples/hello-world/typings/index.d.ts
+++ b/examples/hello-world/typings/index.d.ts
@@ -1,2 +1,4 @@
 /// <reference path="globals/es6-shim/index.d.ts" />
+/// <reference path="globals/isomorphic-fetch/index.d.ts" />
+/// <reference path="globals/node/index.d.ts" />
 /// <reference path="modules/graphql/index.d.ts" />