Merge branch 'master' of https://github.com/daveo1001/aspnetcore-angular2-universal

Author: David Wright

Asp2017.csproj

@@ -57,6 +57,6 @@
       <FilesToDelete Include="ClientApp\dist\**; wwwroot\dist\**" />
     </ItemGroup>
     <Delete Files="@(FilesToDelete)" />
-    <RemoveDir Directories="Client\dist; wwwroot\dist" />
+    <RemoveDir Directories="ClientApp\dist; wwwroot\dist" />
   </Target>
 </Project>

ClientApp/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="col-sm-3">
-    <nav-menu></nav-menu>
+    <app-nav-menu></app-nav-menu>
 </div>
 <div class="col-sm-9 body-content">
     <router-outlet></router-outlet>

ClientApp/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, Injector } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
 import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
 import { Subscription } from 'rxjs/Subscription';
@@ -7,10 +7,10 @@ import { LinkService } from './shared/link.service';
 
 // i18n support
 import { TranslateService } from '@ngx-translate/core';
-import { REQUEST } from './shared/constants/request';
+import { REQUEST } from '@nguniversal/aspnetcore-engine';
 
 @Component({
-    selector: 'app',
+    selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -23,6 +23,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private defaultPageTitle: string = 'My App';
 
     private routerSub$: Subscription;
+    private request;
 
     constructor(
         private router: Router,
@@ -31,14 +32,16 @@ export class AppComponent implements OnInit, OnDestroy {
         private meta: Meta,
         private linkService: LinkService,
         public translate: TranslateService,
-        @Inject(REQUEST) private request
+        private injector: Injector
     ) {
         // this language will be used as a fallback when a translation isn't found in the current language
         translate.setDefaultLang('en');
 
         // the lang to use, if the lang isn't available, it will use the current loader to get them
         translate.use('en');
 
+        this.request = this.injector.get(REQUEST);
+
         console.log(`What's our REQUEST Object look like?`);
         console.log(`The Request object only really exists on the Server, but on the Browser we can at least see Cookies`);
         console.log(this.request);

ClientApp/app/app.module.browser.ts

@@ -3,12 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ORIGIN_URL } from './shared/constants/baseurl.constants';
+import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine';
 import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
-import { REQUEST } from './shared/constants/request';
-import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';
-
+import { BrowserTransferStateModule } from '@angular/platform-browser';
 import { BrowserPrebootModule } from 'preboot/browser';
 
 export function getOriginUrl() {
@@ -23,12 +21,8 @@ export function getRequest() {
 @NgModule({
     bootstrap: [AppComponent],
     imports: [
-        BrowserModule.withServerTransition({
-            appId: 'my-app-id' // make sure this matches with your Server NgModule
-        }),
         BrowserPrebootModule.replayEvents(),
         BrowserAnimationsModule,
-        BrowserTransferStateModule,
 
         // Our Common AppModule
         AppModuleShared

ClientApp/app/app.module.server.ts

@@ -5,33 +5,28 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
-import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
-import { TransferState } from '../modules/transfer-state/transfer-state';
+import { ServerTransferStateModule } from '@angular/platform-server';
 
 import { ServerPrebootModule } from 'preboot/server';
 
 @NgModule({
   bootstrap: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({
-      appId: 'my-app-id' // make sure this matches with your Browser NgModule
-    }),
+    // Our Common AppModule
+    AppModuleShared,
+
     ServerModule,
-    ServerPrebootModule.recordEvents({ appRoot: 'app' }),
+    ServerPrebootModule.recordEvents({ appRoot: 'app-root' }),
     NoopAnimationsModule,
 
-    ServerTransferStateModule,
-
-    // Our Common AppModule
-    AppModuleShared
+    // HttpTransferCacheModule still needs fixes for 5.0
+    //   Leave this commented out for now, as it breaks Server-renders
+    //   Looking into fixes for this! - @MarkPieszak
+    // ServerTransferStateModule // <-- broken for the time-being with ASP.NET
   ]
 })
 export class AppModule {
 
-  constructor(private transferState: TransferState) { }
+  constructor() { }
 
-  // Gotcha (needs to be an arrow function)
-  ngOnBootstrap = () => {
-    this.transferState.inject();
-  }
 }

ClientApp/app/app.module.ts

@@ -2,7 +2,10 @@ import { NgModule, Inject } from '@angular/core';
 import { RouterModule, PreloadAllModules } from '@angular/router';
 import { CommonModule, APP_BASE_HREF } from '@angular/common';
 import { HttpModule, Http } from '@angular/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { TransferHttpCacheModule } from '@nguniversal/common';
 
 import { Ng2BootstrapModule } from 'ngx-bootstrap';
 
@@ -16,17 +19,14 @@ import { HomeComponent } from './containers/home/home.component';
 import { UsersComponent } from './containers/users/users.component';
 import { UserDetailComponent } from './components/user-detail/user-detail.component';
 import { CounterComponent } from './containers/counter/counter.component';
-// import { ChatComponent } from './containers/chat/chat.component';
 import { NotFoundComponent } from './containers/not-found/not-found.component';
 import { NgxBootstrapComponent } from './containers/ngx-bootstrap-demo/ngx-bootstrap.component';
 
 import { LinkService } from './shared/link.service';
 import { UserService } from './shared/user.service';
-// import { ConnectionResolver } from './shared/route.resolver';
-import { ORIGIN_URL } from './shared/constants/baseurl.constants';
-import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
+import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
 
-export function createTranslateLoader(http: Http, baseHref) {
+export function createTranslateLoader(http: HttpClient, baseHref) {
     // Temporary Azure hack
     if (baseHref === null && typeof window !== 'undefined') {
         baseHref = window.location.origin;
@@ -43,24 +43,28 @@ export function createTranslateLoader(http: Http, baseHref) {
         UsersComponent,
         UserDetailComponent,
         HomeComponent,
-        // ChatComponent,
         NotFoundComponent,
         NgxBootstrapComponent
     ],
     imports: [
         CommonModule,
-        HttpModule,
+        BrowserModule.withServerTransition({
+          appId: 'my-app-id' // make sure this matches with your Server NgModule
+        }),
+        HttpClientModule,
+        TransferHttpCacheModule,
+        BrowserTransferStateModule,
+
+
         FormsModule,
         Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
 
-        TransferHttpModule, // Our Http TransferData method
-
         // i18n support
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,
                 useFactory: (createTranslateLoader),
-                deps: [Http, [ORIGIN_URL]]
+                deps: [HttpClient, [ORIGIN_URL]]
             }
         }),
 
@@ -145,9 +149,9 @@ export function createTranslateLoader(http: Http, baseHref) {
     providers: [
         LinkService,
         UserService,
-        // ConnectionResolver,
         TranslateModule
-    ]
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModuleShared {
 }

ClientApp/app/components/navmenu/navmenu.component.html

@@ -8,7 +8,7 @@
           <span class='icon-bar'></span>
           <span class='icon-bar'></span>
         </button>
-        <a [routerLink]="['/home']" class='navbar-link'>Angular 4 Universal & ASP.NET Core</a>
+        <a [routerLink]="['/home']" class='navbar-link'>Angular 5 Universal & ASP.NET Core</a>
       </div>
     </div>
     <div class='clearfix'></div>

ClientApp/app/components/navmenu/navmenu.component.ts

@@ -1,23 +1,23 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'nav-menu',
+    selector: 'app-nav-menu',
     templateUrl: './navmenu.component.html',
     styleUrls: ['./navmenu.component.css']
 })
 
 export class NavMenuComponent {
-    collapse: string = "collapse";
+    collapse: string = 'collapse';
 
     collapseNavbar(): void {
         if (this.collapse.length > 1) {
-            this.collapse = "";
+            this.collapse = '';
         } else {
-            this.collapse = "collapse";
+            this.collapse = 'collapse';
         }
     }
 
     collapseMenu() {
-        this.collapse = "collapse"
+        this.collapse = 'collapse';
     }
 }

ClientApp/app/components/user-detail/user-detail.component.ts

@@ -3,7 +3,7 @@ import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
 @Component({
-    selector: 'user-detail',
+    selector: 'app-user-detail',
     templateUrl: './user-detail.component.html'
 })
 export class UserDetailComponent {

ClientApp/app/containers/counter/counter.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'counter',
+    selector: 'app-counter',
     templateUrl: './counter.component.html'
 })
 export class CounterComponent {