feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (TrilonIO#437)

* feat(5.0): update engine-etc for angular 5.0-rc1

WIP - More updates to come

* remove ng 4 references

* update source maps for faster HMR builds

* use aspnetcore-engine & misc updates and fixes

* update to 5.0 official

Closes TrilonIO#434
Closes TrilonIO#435
Closes TrilonIO#430
Closes TrilonIO#424

Author: MarkPieszak

ClientApp/app/app.component.ts

@@ -9,7 +9,7 @@ import { LinkService } from './shared/link.service';
 
 // i18n support
 import { TranslateService } from '@ngx-translate/core';
-import { REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
+import { REQUEST } from '@nguniversal/aspnetcore-engine';
 
 @Component({
     selector: 'app-root',

ClientApp/app/app.module.browser.ts

@@ -3,8 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-<<<<<<< HEAD
-import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
+import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine';
 import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
 import { BrowserTransferStateModule } from '@angular/platform-browser';

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 { ORIGIN_URL } from '@nguniversal/aspnetcore-engine/tokens';
+import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
 
 export function createTranslateLoader(http: HttpClient, baseHref) {
     // Temporary Azure hack

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

@@ -26,4 +26,4 @@ <h2>Users</h2>
     </button>
   </li>
 </ul>
-<app-user-detail (userUpdate)="onUserUpdate($event)" [user]="selectedUser"></app-user-detail>
+<app-user-detail [user]="selectedUser"></app-user-detail>

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

@@ -12,29 +12,30 @@ import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
 @Component({
-  selector: 'app-users',
-  templateUrl: './users.component.html',
-  styleUrls: ['./users.component.css'],
-  animations: [
-    // Animation example
-    // Triggered in the ngFor with [@flyInOut]
-    trigger('flyInOut', [
-      state('in', style({ transform: 'translateY(0)' })),
-      transition('void => *', [
-        style({ transform: 'translateY(-100%)' }),
-        animate(1000)
-      ]),
-      transition('* => void', [
-        animate(1000, style({ transform: 'translateY(100%)' }))
-      ])
-    ])
-  ]
+    selector: 'app-users',
+    templateUrl: './users.component.html',
+    styleUrls: ['./users.component.css'],
+    animations: [
+        // Animation example
+        // Triggered in the ngFor with [@flyInOut]
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [
+                style({ transform: 'translateY(-100%)' }),
+                animate(1000)
+            ]),
+            transition('* => void', [
+                animate(1000, style({ transform: 'translateY(100%)' }))
+            ])
+        ])
+    ]
 })
 export class UsersComponent implements OnInit {
 
   users: IUser[];
   selectedUser: IUser;
 
+<<<<<<< HEAD
   // Use "constructor"s only for dependency injection
   constructor(
     private userService: UserService
@@ -48,11 +49,27 @@ export class UsersComponent implements OnInit {
       this.users = result;
     });
   }
+=======
+    // Use "constructor"s only for dependency injection
+    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('HttpClient [GET] /api/users/allresult', result);
+            this.users = result;
+        });
+    }
+>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)
 
   onSelect(user: IUser): void {
     this.selectedUser = user;
   }
 
+<<<<<<< HEAD
   deleteUser(user) {
     this.clearUser();
     this.userService.deleteUser(user).subscribe(result => {
@@ -81,6 +98,25 @@ export class UsersComponent implements OnInit {
   clearUser() {
     if (this.selectedUser) {
       this.selectedUser = null;
+=======
+    deleteUser(user) {
+        this.userService.deleteUser(user).subscribe(result => {
+            console.log('Delete user result: ', result);
+            let position = this.users.indexOf(user);
+            this.users.splice(position, 1);
+        }, error => {
+            console.log(`There was an issue. ${error._body}.`);
+        });
+    }
+
+    addUser(newUserName) {
+        this.userService.addUser(newUserName).subscribe(result => {
+            console.log('Post user result: ', result);
+            this.users.push(result);
+        }, error => {
+            console.log(`There was an issue. ${error._body}.`);
+        });
+>>>>>>> feat(Angular 5.0): update engine-etc for angular 5.0 & Domino (#437)
     }
   }
 }

ClientApp/app/shared/user.service.ts

@@ -2,7 +2,7 @@ import { Injectable, Inject, Injector } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Http, URLSearchParams } from '@angular/http';
 import { APP_BASE_HREF } from '@angular/common';
-import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine/tokens';
+import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine';
 import { IUser } from '../models/User';
 import { Observable } from 'rxjs';
 

ClientApp/boot.server.ts

@@ -11,6 +11,8 @@ enableProdMode();
 
 export default createServerRenderer((params) => {
 
+  console.log('server ?');
+
   // Platform-server provider configuration
   const setupOptions: IEngineOptions = {
     appSelector: '<app-root></app-root>',
@@ -24,6 +26,9 @@ export default createServerRenderer((params) => {
 
   return ngAspnetCoreEngine(setupOptions).then(response => {
 
+    // console.log('\n\n\naspnet-engine!!!\n\n\n')
+    console.log(response)
+
     // Apply your transferData to response.globals
     response.globals.transferData = createTransferScript({
       someData: 'Transfer this to the client on the window.TRANSFER_CACHE {} object',

README.md

@@ -2,10 +2,6 @@
 
 ## By [DevHelp.Online](http://www.DevHelp.Online)
 
-> Updated to the latest Angular 6.x
-
-> Note ServerTransferModule still in the works - fix coming soon
-=======
 # ASP.NET Core 2.0 & Angular 5(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! 
 
 ## By [DevHelp.Online](http://www.DevHelp.Online)
@@ -348,10 +344,6 @@ Well now, your Client-side Angular will take over, and you'll have a fully funct
 
 > When building components in Angular 5 there are a few things to keep in mind.
 
- - Make sure you provide Absolute URLs when calling any APIs. (The server can't understand relative paths, so `/api/whatever` will fail).
- 
- - API calls will be ran during a server, and once again during the client render, so make sure you're using transfering data that's important to you so that you don't see a flicker.
-
  - **`window`**, **`document`**, **`navigator`**, and other browser types - _do not exist on the server_ - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:
     - If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server. 
 

package.json

@@ -64,7 +64,6 @@
     "webpack": "^4.9.1",
     "webpack-hot-middleware": "^2.22.2",
     "webpack-merge": "^4.1.2",
-    "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular/cli": "^6.0.5",

webpack.config.js

@@ -101,8 +101,7 @@ module.exports = (env) => {
                 manifest: require('./ClientApp/dist/vendor-manifest.json'),
                 sourceType: 'commonjs2',
                 name: './vendor'
-            })
-        ].concat(isDevBuild ? [
+            }),
             new webpack.ContextReplacementPlugin(
               // fixes WARNING Critical dependency: the request of a dependency is an expression
               /(.+)?angular(\\|\/)core(.+)?/,