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

This works both in Development & Production. 🎁
(Apologies on the delay)

Now dotnet publish won't fail, and you can successfully build Production builds.

In the future, boot.server.PRODUCTION.ts probably won't be needed.

We'll be working on upgrading this to use the CLI version that Steve Sanderson has been working on the past few months - this will clean-up a lot of the configuration so that it's all handled by the CLI itself. (Aka: no more webpack files for us to deal with here) ✨

This should close out many issues:

#535
#482
(others as well, can't find them at the moment)

Author: MarkPieszak

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}.`);
         });