Update to Angular 4 (but leave directory name as Angular2Spa until finished)

templates/Angular2Spa/ClientApp/app/app.module.client.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { sharedConfig } from './app.module.shared';
+
+@NgModule({
+    bootstrap: sharedConfig.bootstrap,
+    declarations: sharedConfig.declarations,
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        ...sharedConfig.imports
+    ],
+    providers: [
+        { provide: 'ORIGIN_URL', useValue: location.origin }
+    ]
+})
+export class AppModule {
+}

templates/Angular2Spa/ClientApp/app/app.module.server.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { sharedConfig } from './app.module.shared';
+
+@NgModule({
+    bootstrap: sharedConfig.bootstrap,
+    declarations: sharedConfig.declarations,
+    imports: [
+        ServerModule,
+        ...sharedConfig.imports
+    ]
+})
+export class AppModule {
+}

templates/Angular2Spa/ClientApp/app/app.module.shared.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { UniversalModule } from 'angular2-universal';
+
 import { AppComponent } from './components/app/app.component'
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { CounterComponent } from './components/counter/counter.component';
 
-@NgModule({
+export const sharedConfig: NgModule = {
     bootstrap: [ AppComponent ],
     declarations: [
         AppComponent,
@@ -17,7 +17,6 @@ import { CounterComponent } from './components/counter/counter.component';
         HomeComponent
     ],
     imports: [
-        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
         RouterModule.forRoot([
             { path: '', redirectTo: 'home', pathMatch: 'full' },
             { path: 'home', component: HomeComponent },
@@ -26,6 +25,4 @@ import { CounterComponent } from './components/counter/counter.component';
             { path: '**', redirectTo: 'home' }
         ])
     ]
-})
-export class AppModule {
-}
+};

templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { Http } from '@angular/http';
 
 @Component({
@@ -8,8 +8,8 @@ import { Http } from '@angular/http';
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
-    constructor(http: Http) {
-        http.get('/api/SampleData/WeatherForecasts').subscribe(result => {
+    constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) {
+        http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
             this.forecasts = result.json() as WeatherForecast[];
         });
     }