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

MarkPieszak · BillSheldon-HunterIndustries · commit 66f655dbe902 · 2018-05-16T07:31:50.000-07:00
* 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
diff --git a/ClientApp/app/app.component.ts b/ClientApp/app/app.component.ts
@@ -7,7 +7,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',
diff --git a/ClientApp/app/app.module.browser.ts b/ClientApp/app/app.module.browser.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-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';
diff --git a/ClientApp/app/app.module.ts b/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
diff --git a/ClientApp/app/containers/users/users.component.html b/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>
diff --git a/ClientApp/app/containers/users/users.component.ts b/ClientApp/app/containers/users/users.component.ts
@@ -7,75 +7,64 @@ 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;
 
-  // Use "constructor"s only for dependency injection
-  constructor(
-    private userService: UserService
-  ) { }
+    // 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;
-    });
-  }
-
-  onSelect(user: IUser): void {
-    this.selectedUser = user;
-  }
-
-  deleteUser(user) {
-    this.clearUser();
-    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}.`);
-    });
-  }
+    // 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;
+        });
+    }
 
-  onUserUpdate(event) {
-    this.clearUser();
-  }
+    onSelect(user: IUser): void {
+        this.selectedUser = user;
+    }
 
-  addUser(newUserName) {
-    this.clearUser();
-    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}.`);
-    });
-  }
+    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}.`);
+        });
+    }
 
-  clearUser() {
-    if (this.selectedUser) {
-      this.selectedUser = null;
+    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}.`);
+        });
     }
   }
 }
diff --git a/ClientApp/app/shared/user.service.ts b/ClientApp/app/shared/user.service.ts
@@ -2,7 +2,7 @@
 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/Observable';
 
diff --git a/ClientApp/boot.server.ts b/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',
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# ASP.NET Core 2.0 & Angular 5(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! 
+# ASP.NET Core 2.0 & Angular 5 (+) advanced starter - with Server-side prerendering (for Angular SEO)!
 
 ## By [DevHelp.Online](http://www.DevHelp.Online)
 
@@ -339,10 +339,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. 
     
diff --git a/package.json b/package.json
@@ -19,15 +19,16 @@
     "@angular/animations": "^5.0.0",
     "@angular/common": "^5.0.0",
     "@angular/compiler": "^5.0.0",
+    "@angular/compiler-cli": "^5.0.0",
     "@angular/core": "^5.0.0",
     "@angular/forms": "^5.0.0",
     "@angular/http": "^5.0.0",
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/platform-server": "^5.0.0",
     "@angular/router": "^5.0.0",
-    "@nguniversal/aspnetcore-engine": "^5.0.0-beta.8",
-    "@nguniversal/common": "^5.0.0-beta.8",
+    "@nguniversal/aspnetcore-engine": "^5.0.0-beta.5",
+    "@nguniversal/common": "^5.0.0-beta.5",
     "@ngx-translate/core": "^8.0.0",
     "@ngx-translate/http-loader": "^2.0.0",
     "@types/node": "^7.0.12",
@@ -59,17 +60,16 @@
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "to-string-loader": "^1.1.5",
-    "typescript": "~2.5.0",
+    "typescript": "2.5.3",
     "url-loader": "^0.5.7",
     "webpack": "^3.6.0",
     "webpack-hot-middleware": "^2.19.1",
     "webpack-merge": "^4.1.0",
     "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.0-beta.1",
-    "@angular/compiler-cli": "^5.2.1",
-    "@ngtools/webpack": "^1.9.0",
+    "@angular/cli": "^1.5.0",
+    "@ngtools/webpack": "^1.8.0",
     "@types/chai": "^3.4.34",
     "@types/jasmine": "^2.5.37",
     "chai": "^3.5.0",
diff --git a/webpack.config.js b/webpack.config.js
@@ -59,18 +59,13 @@ module.exports = (env) => {
         ] : [
             // new BundleAnalyzerPlugin(),
             // Plugins that apply in production builds only
-            new AngularCompilerPlugin({
-              mainPath: path.join(__dirname, 'ClientApp/boot.browser.ts'),
-              tsConfigPath: './tsconfig.json',
-              entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
-              exclude: ['./**/*.server.ts']
-            }),
-            new webpack.optimize.UglifyJsPlugin({
-                output: {
-                    ascii_only: true,
-                }
-            }),
-          ]),
+            new webpack.optimize.UglifyJsPlugin(),
+            new AotPlugin({
+                tsConfigPath: './tsconfig.json',
+                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
+                exclude: ['./**/*.server.ts']
+            })
+        ]),
         devtool: isDevBuild ? 'cheap-eval-source-map' : false,
         node: {
           fs: "empty"
@@ -90,8 +85,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(.+)?/,
@@ -104,7 +98,6 @@ module.exports = (env) => {
               path.join(__dirname, 'src'),
               {}
             )
-        ] : [
             new webpack.optimize.UglifyJsPlugin({
                 mangle: false,
                 compress: false,
