Feature(Angular 5.0): Upgrade to working copy of 5.0

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 {

ClientApp/app/containers/home/home.component.html

@@ -1,7 +1,7 @@
 <h1>{{ title }}</h1>
 
 <blockquote>
-  <strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
+  <strong>Enjoy the latest features from .NET Core & Angular 5.0!</strong>
   <br> For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
   <br><br>
 </blockquote>
@@ -12,7 +12,7 @@ <h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
     <ul>
       <li>ASP.NET Core 2.0 :: ( Visual Studio 2017 )</li>
       <li>
-        Angular 4.* front-end UI framework
+        Angular 5.* front-end UI framework
         <ul>
           <li>Angular **platform-server** (aka: Universal) - server-side rendering for SEO, deep-linking, and
             incredible performance.</li>
@@ -22,25 +22,17 @@ <h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
       </li>
       <li>
         The latest TypeScript 2.* features
-        <!--<ul>
-                    <li>
-                        "Path" support example - create your own custom directory paths to avoid `../../` directory diving.<br />
-                        Check the <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/tsconfig.json">tsconfig</a> to see how they are setup.
-                    </li>
-                </ul>-->
       </li>
       <li>
         Webpack
         <ul>
-          <!--<li>TS2 aware path support</li>-->
           <li>Hot Module Reloading/Replacement for an amazing development experience.</li>
           <li>Tree-shaking</li>
         </ul>
       </li>
 
       <li>Bootstrap (ngx-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
       <li>Unit testing via karma & jasmine.</li>
-      <!--<li>e2e testing via protractor.</li>-->
     </ul>
 
   </div>

ClientApp/app/containers/home/home.component.ts

@@ -8,7 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class HomeComponent implements OnInit {
 
-    title: string = 'Angular 4.0 Universal & ASP.NET Core 2.0 advanced starter-kit';
+    title: string = 'Angular 5.x Universal & ASP.NET Core 2.0 advanced starter-kit';
 
     // Use "constructor"s only for dependency injection
     constructor(

ClientApp/app/containers/lazy/lazy.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'lazy-view',
+  selector: 'app-lazy-view',
   template: `
     <h1>Lazy-Loaded Component!</h1>
     <blockquote>

ClientApp/app/containers/not-found/not-found.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'not-found',
+    selector: 'app-not-found',
     templateUrl: './not-found.component.html'
 })
 export class NotFoundComponent implements OnInit {

ClientApp/app/containers/users/users.component.html

@@ -26,4 +26,4 @@ <h2>Users</h2>
     </button>
   </li>
 </ul>
-<user-detail [user]="selectedUser"></user-detail>
+<app-user-detail [user]="selectedUser"></app-user-detail>

ClientApp/app/containers/users/users.component.ts

@@ -7,7 +7,7 @@ import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
 @Component({
-    selector: 'users',
+    selector: 'app-users',
     templateUrl: './users.component.html',
     styleUrls: ['./users.component.css'],
     animations: [
@@ -31,15 +31,16 @@ export class UsersComponent implements OnInit {
     selectedUser: IUser;
 
     // Use "constructor"s only for dependency injection
-    constructor(private userService: UserService) { }
+    constructor(
+      private userService: UserService
+    ) { }
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up
     ngOnInit() {
         this.userService.getUsers().subscribe(result => {
-            console.log('Get user result: ', result);
-            console.log('TransferHttp [GET] /api/users/allresult', result);
-            this.users = result as IUser[];
+            console.log('HttpClient [GET] /api/users/allresult', result);
+            this.users = result;
         });
     }
 
@@ -50,10 +51,8 @@ export class UsersComponent implements OnInit {
     deleteUser(user) {
         this.userService.deleteUser(user).subscribe(result => {
             console.log('Delete user result: ', result);
-            if (result.ok) {
-                let position = this.users.indexOf(user);
-                this.users.splice(position, 1);
-            }
+            let position = this.users.indexOf(user);
+            this.users.splice(position, 1);
         }, error => {
             console.log(`There was an issue. ${error._body}.`);
         });
@@ -62,9 +61,7 @@ export class UsersComponent implements OnInit {
     addUser(newUserName) {
         this.userService.addUser(newUserName).subscribe(result => {
             console.log('Post user result: ', result);
-            if (result.ok) {
-                this.users.push(result.json());
-            }
+            this.users.push(result);
         }, error => {
             console.log(`There was an issue. ${error._body}.`);
         });