Update Angular 2 Music Store sample to latest Angular2/angular-universal and make HTTP requests work during server-side prerendering

SteveSandersonMS · SteveSandersonMS · commit 7b53e4aa5541 · 2016-04-21T11:59:01.000+01:00
diff --git a/samples/angular/MusicStore/package.json b/samples/angular/MusicStore/package.json
@@ -2,10 +2,10 @@
   "name": "MusicStore",
   "version": "0.0.0",
   "dependencies": {
-    "angular2": "2.0.0-beta.13",
-    "angular2-aspnet": "^0.0.5",
-    "angular2-universal": "0.90.1",
-    "aspnet-prerendering": "^1.0.0",
+    "angular2": "2.0.0-beta.15",
+    "angular2-aspnet": "^0.0.6",
+    "angular2-universal": "0.98.1",
+    "aspnet-prerendering": "^1.0.1",
     "bootstrap": "^3.3.5",
     "css": "^2.2.1",
     "es6-module-loader": "0.15.0",
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/boot-server.ts b/samples/angular/MusicStore/wwwroot/ng-app/boot-server.ts
@@ -3,13 +3,14 @@ import { FormBuilder } from 'angular2/common';
 import * as ngCore from 'angular2/core';
 import * as ngRouter from 'angular2/router';
 import * as ngUniversal from 'angular2-universal';
+import { BASE_URL, ORIGIN_URL, REQUEST_URL } from 'angular2-universal/common';
 import { App } from './components/app/app';
 
 export default function (params: any): Promise<{ html: string, globals?: any }> {
     const serverBindings = [
-        ngCore.provide(ngUniversal.BASE_URL, { useValue: params.absoluteUrl }),
-        ngCore.provide(ngUniversal.REQUEST_URL, { useValue: params.url }),
-        ngCore.provide(ngRouter.APP_BASE_HREF, { useValue: '/' }),
+        ngCore.provide(BASE_URL, { useValue: '/' }),
+        ngCore.provide(ORIGIN_URL, { useValue: params.origin }),
+        ngCore.provide(REQUEST_URL, { useValue: params.url }),
         ngUniversal.NODE_HTTP_PROVIDERS,
         ngUniversal.NODE_ROUTER_PROVIDERS,
         FormBuilder
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-details/album-details.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-details/album-details.ts
@@ -13,7 +13,11 @@ export class AlbumDetails {
     public albumData: models.Album;
 
     constructor(http: Http, routeParam: router.RouteParams) {
-        http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+
+        http.get('/api/albums/' + routeParam.params['albumId'], options).subscribe(result => {
             this.albumData = result.json();
         });
     }
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
@@ -24,10 +24,14 @@ export class AlbumEdit {
     private _http: Http;
 
     constructor(fb: FormBuilder, http: Http, routeParam: router.RouteParams) {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+
         this._http = http;
 
         var albumId = parseInt(routeParam.params['albumId']);
-        http.get('/api/albums/' + albumId).subscribe(result => {
+        http.get('/api/albums/' + albumId, options).subscribe(result => {
             var json = result.json();
             this.originalAlbum = json;
             (<Control>this.form.controls['Title']).updateValue(json.Title);
@@ -37,11 +41,11 @@ export class AlbumEdit {
             (<Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
         });
 
-        http.get('/api/artists/lookup').subscribe(result => {
+        http.get('/api/artists/lookup', options).subscribe(result => {
             this.artists = result.json();
         });
 
-        http.get('/api/genres/genre-lookup').subscribe(result => {
+        http.get('/api/genres/genre-lookup', options).subscribe(result => {
             this.genres = result.json();
         });
 
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/albums-list/albums-list.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/albums-list/albums-list.ts
@@ -45,8 +45,12 @@ export class AlbumsList {
     }
 
     refreshData() {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+        
         var sortBy = this._sortBy + (this._sortByDesc ? ' DESC' : '');
-        this._http.get(`/api/albums?page=${ this._pageIndex }&pageSize=50&sortBy=${ sortBy }`).subscribe(result => {
+        this._http.get(`/api/albums?page=${ this._pageIndex }&pageSize=50&sortBy=${ sortBy }`, options).subscribe(result => {
             var json = result.json();
             this.rows = json.Data;
 
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/app/app.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/app/app.ts
@@ -25,7 +25,11 @@ export class App {
     public genres: models.Genre[];
 
     constructor(http: Http) {
-        http.get('/api/genres/menu').subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+        
+        http.get('/api/genres/menu', options).subscribe(result => {
             this.genres = result.json();
         });
     }
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.ts
@@ -11,7 +11,11 @@ export class AlbumDetails {
     public albumData: models.Album;
 
     constructor(http: Http, routeParam: router.RouteParams) {
-        http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+        
+        http.get('/api/albums/' + routeParam.params['albumId'], options).subscribe(result => {
             this.albumData = result.json();
         });
     }
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/public/genre-contents/genre-contents.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/public/genre-contents/genre-contents.ts
@@ -13,7 +13,11 @@ export class GenreContents {
     public albums: models.Album[];
 
     constructor(http: Http, routeParam: router.RouteParams) {
-        http.get(`/api/genres/${ routeParam.params['genreId'] }/albums`).subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+        
+        http.get(`/api/genres/${ routeParam.params['genreId'] }/albums`, options).subscribe(result => {
             this.albums = result.json();
         });
     }
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/public/genres-list/genres-list.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/public/genres-list/genres-list.ts
@@ -12,7 +12,11 @@ export class GenresList {
     public genres: models.Genre[];
 
     constructor(http: Http) {
-        http.get('/api/genres').subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+        
+        http.get('/api/genres', options).subscribe(result => {
             this.genres = result.json();
         });
     }
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts
@@ -12,7 +12,11 @@ export class Home {
     public mostPopular: models.Album[];
 
     constructor(http: Http) {
-        http.get('/api/albums/mostPopular').subscribe(result => {
+        // Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
+        let isServerSide = typeof window === 'undefined';
+        let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
+
+        http.get('/api/albums/mostPopular', options).subscribe(result => {
             this.mostPopular = result.json();
         });
     }
diff --git a/src/Microsoft.AspNet.AngularServices/npm/package.json b/src/Microsoft.AspNet.AngularServices/npm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-aspnet",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Helpers for Angular 2 apps built on ASP.NET",
   "main": "./dist/Exports",
   "scripts": {
@@ -15,7 +15,7 @@
   "author": "Microsoft",
   "license": "Apache-2.0",
   "dependencies": {
-    "angular2": "2.0.0-beta.13",
+    "angular2": "^2.0.0-beta.13",
     "rxjs": "5.0.0-beta.2"
   },
   "devDependencies": {
