use aspnetcore-engine & misc updates and fixes

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,10 +3,9 @@ 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 { BrowserPrebootModule } from 'preboot/browser';

ClientApp/app/app.module.server.ts

@@ -17,7 +17,7 @@ import { ServerPrebootModule } from 'preboot/server';
       appId: 'my-app-id' // make sure this matches with your Browser NgModule
     }),
     ServerModule,
-    ServerPrebootModule.recordEvents({ appRoot: 'app' }),
+    ServerPrebootModule.recordEvents({ appRoot: 'app-root' }),
     NoopAnimationsModule,
 
     ServerTransferStateModule,

ClientApp/app/app.module.ts

@@ -24,7 +24,7 @@ import { NgxBootstrapComponent } from './containers/ngx-bootstrap-demo/ngx-boots
 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 { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
 import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
 
 export function createTranslateLoader(http: HttpClient, baseHref) {

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/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: [

ClientApp/app/shared/constants/baseurl.constants.ts

@@ -1,42 +1,46 @@
-import { Injectable, Inject } from '@angular/core';
+import { Injectable, Inject, Injector } from '@angular/core';
 import { Http, URLSearchParams } from '@angular/http';
 import { APP_BASE_HREF } from '@angular/common';
-import { ORIGIN_URL } from './constants/baseurl.constants';
+import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
 import { IUser } from '../models/User';
 import { TransferHttp } from '../../modules/transfer-http/transfer-http';
 import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class UserService {
-    constructor(
-        private transferHttp: TransferHttp, // Use only for GETS that you want re-used between Server render -> Client render
-        private http: Http, // Use for everything else
-        @Inject(ORIGIN_URL) private baseUrl: string) {
 
-    }
+  private baseUrl: string;
 
-    getUsers(): Observable<IUser[]> {
-        // ** TransferHttp example / concept **
-        //    - Here we make an Http call on the server, save the result on the window object and pass it down with the SSR,
-        //      The Client then re-uses this Http result instead of hitting the server again!
+  constructor(
+    private transferHttp: TransferHttp, // Use only for GETS that you want re-used between Server render -> Client render
+    private http: Http, // Use for everything else
+    private injector: Injector
+  ) {
+    this.baseUrl = this.injector.get(ORIGIN_URL);
+  }
 
-        //  NOTE : transferHttp also automatically does .map(res => res.json()) for you, so no need for these calls
-        return this.transferHttp.get(`${this.baseUrl}/api/users`);
-    }
+  getUsers(): Observable<IUser[]> {
+    // ** TransferHttp example / concept **
+    //    - Here we make an Http call on the server, save the result on the window object and pass it down with the SSR,
+    //      The Client then re-uses this Http result instead of hitting the server again!
 
-    getUser(user: IUser): Observable<IUser> {
-        return this.transferHttp.get(`${this.baseUrl}/api/users/` + user.id);
-    }
+    //  NOTE : transferHttp also automatically does .map(res => res.json()) for you, so no need for these calls
+    return this.transferHttp.get(`${this.baseUrl}/api/users`);
+  }
 
-    deleteUser(user: IUser): Observable<any> {
-        return this.http.delete(`${this.baseUrl}/api/users/` + user.id);
-    }
+  getUser(user: IUser): Observable<IUser> {
+    return this.transferHttp.get(`${this.baseUrl}/api/users/` + user.id);
+  }
 
-    updateUser(user: IUser): Observable<any> {
-        return this.http.put(`${this.baseUrl}/api/users/` + user.id, user);
-    }
+  deleteUser(user: IUser): Observable<any> {
+    return this.http.delete(`${this.baseUrl}/api/users/` + user.id);
+  }
 
-    addUser(newUserName: string): Observable<any> {
-        return this.http.post(`${this.baseUrl}/api/users`, { name: newUserName })
-    }
+  updateUser(user: IUser): Observable<any> {
+    return this.http.put(`${this.baseUrl}/api/users/` + user.id, user);
+  }
+
+  addUser(newUserName: string): Observable<any> {
+    return this.http.post(`${this.baseUrl}/api/users`, { name: newUserName });
+  }
 }

ClientApp/app/shared/constants/request.ts

@@ -1,27 +1,24 @@
 import 'zone.js/dist/zone-node';
 import './polyfills/server.polyfills';
 import { enableProdMode } from '@angular/core';
-import { INITIAL_CONFIG } from '@angular/platform-server';
-import { APP_BASE_HREF } from '@angular/common';
-import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { createServerRenderer } from 'aspnet-prerendering';
 
-import { ORIGIN_URL } from './app/shared/constants/baseurl.constants';
 // Grab the (Node) server-specific NgModule
 import { AppModule } from './app/app.module.server';
-// Temporary * the engine will be on npm soon (`@universal/ng-aspnetcore-engine`)
-import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from './polyfills/temporary-aspnetcore-engine';
+import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from '@nguniversal/aspnetcore-engine';
 
 enableProdMode();
 
 export default createServerRenderer((params) => {
 
   // Platform-server provider configuration
   const setupOptions: IEngineOptions = {
-    appSelector: '<app></app>',
+    appSelector: '<app-root></app-root>',
     ngModule: AppModule,
     request: params,
     providers: [
-      // Optional - Any other Server providers you want to pass (remember you'll have to provide them for the Browser as well)
+      // Optional - Any other Server providers you want to pass
+      // (remember you'll have to provide them for the Browser as well)
     ]
   };
 
@@ -34,8 +31,8 @@ export default createServerRenderer((params) => {
     });
 
     return ({
-      html: response.html,
-      globals: response.globals
+      html: response.html, // our <app> serialized
+      globals: response.globals // all of our styles/scripts/meta-tags/link-tags for aspnet to serve up
     });
   });
 });