feat(angular6): upgrade .net core 2.1, bootstrap 4, ngx-bootsrap 3, rxjs 6, etc

closes #619

Author: Robert Zeni

.vscode/launch.json

@@ -20,7 +20,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,
@@ -51,7 +51,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,
@@ -82,7 +82,7 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll",
+      "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll",
       "args": [],
       "cwd": "${workspaceRoot}",
       "stopAtEntry": false,

Asp2017.csproj

@@ -1,17 +1,17 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
-    <TargetFramework>netcoreapp2.0</TargetFramework>
+    <TargetFramework>netcoreapp2.1</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
   </PropertyGroup>
   <ItemGroup>
   <!-- New Meta Package has SpaServices in It -->
-    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
-    <PackageReference Include="NETStandard.Library" Version="2.0.0" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.0.0" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.0.0" />
-    <PackageReference Include="Swashbuckle.AspNetCore" Version="1.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.1.0-rc1-final" />
+    <PackageReference Include="NETStandard.Library" Version="2.0.3" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.1.0-rc1-final" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.1.0-rc1-final" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="2.4.0" />
   </ItemGroup>
   <ItemGroup>
       <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />

Asp2017.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 15
+VisualStudioVersion = 15.0.27703.2018
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Asp2017", "Asp2017.csproj", "{BC28E9F7-E6EC-447D-AABD-17683BEAD625}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {DE341460-9041-458F-99D5-43FC7572CFA6}
+	EndGlobalSection
+EndGlobal

ClientApp/app/app.module.browser.ts

@@ -7,7 +7,7 @@ import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine/tokens';
 import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
 import { BrowserTransferStateModule } from '@angular/platform-browser';
-import { BrowserPrebootModule } from 'preboot/browser';
+import { PrebootModule } from 'preboot';
 
 export function getOriginUrl() {
   return window.location.origin;
@@ -21,7 +21,7 @@ export function getRequest() {
 @NgModule({
     bootstrap: [AppComponent],
     imports: [
-        BrowserPrebootModule.replayEvents(),
+        PrebootModule.withConfig({ appRoot: 'app-root' }),
         BrowserAnimationsModule,
 
         // Our Common AppModule

ClientApp/app/app.module.server.ts

@@ -7,7 +7,7 @@ import { AppModuleShared } from './app.module';
 import { AppComponent } from './app.component';
 import { ServerTransferStateModule } from '@angular/platform-server';
 
-import { ServerPrebootModule } from 'preboot/server';
+import { PrebootModule } from 'preboot';
 
 @NgModule({
   bootstrap: [AppComponent],
@@ -16,7 +16,7 @@ import { ServerPrebootModule } from 'preboot/server';
     AppModuleShared,
 
     ServerModule,
-    ServerPrebootModule.recordEvents({ appRoot: 'app-root' }),
+    PrebootModule.withConfig({ appRoot: 'app-root' }),
     NoopAnimationsModule,
 
     // HttpTransferCacheModule still needs fixes for 5.0

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

@@ -12,7 +12,7 @@ <h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
     <ul>
       <li>ASP.NET Core 2.0 :: ( Visual Studio 2017 )</li>
       <li>
-        Angular 5.* front-end UI framework
+        Angular 6.* front-end UI framework
         <ul>
           <li>Angular **platform-server** (aka: Universal) - server-side rendering for SEO, deep-linking, and
             incredible performance.</li>

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

@@ -1,8 +1,13 @@
 import {
-  Component, OnInit,
-  // animation imports
-  trigger, state, style, transition, animate, Inject
+  Component, OnInit, Inject
 } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 

README.md

@@ -1,8 +1,8 @@
-# ASP.NET Core 2.0 & Angular 5(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! 
+# ASP.NET Core 2.0 & Angular 6(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! 
 
 ## By [DevHelp.Online](http://www.DevHelp.Online)
 
-> Updated to the latest Angular 5.x
+> Updated to the latest Angular 6.x
 
 > Note ServerTransferModule still in the works - fix coming soon
 
@@ -81,7 +81,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
   - Codelyzer (for Real-time static code analysis) 
     - VSCode & Atom provide real-time analysis out of the box.
 
-- **ASP.NET Core 2.0**
+- **ASP.NET Core 2.1**
 
   - Integration with NodeJS to provide pre-rendering, as well as any other Node module asset you want to use.
 
@@ -113,7 +113,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
 
 ### Visual Studio 2017
 
-Make sure you have .NET Core 2.0 installed and/or VS2017 15.3.
+Make sure you have .NET Core 2.1 installed and/or VS2017 15.3.
 VS2017 will automatically install all the neccessary npm & .NET dependencies when you open the project.
 
 Simply push F5 to start debugging !

package.json

@@ -16,65 +16,65 @@
     "clean": "rimraf wwwroot/dist clientapp/dist"
   },
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^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",
-    "@ngx-translate/core": "^9.1.1",
-    "@ngx-translate/http-loader": "^2.0.1",
-    "@types/node": "^7.0.12",
+    "@angular/animations": "^6.0.3",
+    "@angular/common": "^6.0.3",
+    "@angular/compiler": "^6.0.3",
+    "@angular/core": "^6.0.3",
+    "@angular/forms": "^6.0.3",
+    "@angular/http": "^6.0.3",
+    "@angular/platform-browser": "^6.0.3",
+    "@angular/platform-browser-dynamic": "^6.0.3",
+    "@angular/platform-server": "^6.0.3",
+    "@angular/router": "^6.0.3",
+    "@nguniversal/aspnetcore-engine": "^6.0.0",
+    "@nguniversal/common": "^6.0.0",
+    "@ngx-translate/core": "^10.0.2",
+    "@ngx-translate/http-loader": "^3.0.1",
+    "@types/node": "^10.1.2",
     "angular2-router-loader": "^0.3.5",
     "angular2-template-loader": "^0.6.2",
     "aspnet-prerendering": "^3.0.1",
     "aspnet-webpack": "^2.0.3",
-    "awesome-typescript-loader": "^3.2.3",
+    "awesome-typescript-loader": "^5.0.0",
     "bootstrap": "^4.1.1",
     "bootstrap-sass": "^3.3.7",
     "core-js": "^2.5.6",
     "css": "^2.2.3",
     "css-loader": "^0.28.11",
     "event-source-polyfill": "^0.0.12",
     "expose-loader": "^0.7.5",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "html-loader": "^0.5.5",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.3.1",
     "json-loader": "^0.5.7",
-    "moment": "2.18.1",
-    "ngx-bootstrap": "2.0.5",
+    "moment": "2.22.1",
+    "ngx-bootstrap": "^3.0.0",
     "node-sass": "^4.9.0",
-    "preboot": "^5.0.0",
+    "preboot": "^6.0.0-beta.4",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
-    "rxjs": "^6.1.0",
-    "rxjs-compat": "^6.1.0",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
+    "rxjs": "^6.2.0",
+    "rxjs-compat": "^6.2.0",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
     "to-string-loader": "^1.1.5",
     "typescript": "~2.7.2",
     "url-loader": "^1.0.1",
-    "webpack": "^3.6.0",
-    "webpack-hot-middleware": "^2.22.1",
-    "webpack-merge": "^4.1.0",
+    "webpack": "^4.9.1",
+    "webpack-hot-middleware": "^2.22.2",
+    "webpack-merge": "^4.1.2",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.0-beta.1",
-    "@angular/compiler-cli": "^5.2.1",
-    "@ngtools/webpack": "^1.9.0",
+    "@angular/cli": "^6.0.5",
+    "@angular/compiler-cli": "6.0.3",
+    "@ngtools/webpack": "^6.0.5",
     "@types/chai": "^4.1.3",
     "@types/jasmine": "^2.8.7",
     "chai": "^4.1.2",
     "codelyzer": "^3.1.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^2.5.2",
     "karma": "^1.7.1",
@@ -88,6 +88,8 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
     "tslint": "^5.10.0",
-    "webpack-bundle-analyzer": "^2.12.0"
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^2.1.4"
   }
 }

webpack.config.js

@@ -21,6 +21,7 @@ module.exports = (env) => {
     // Configuration in common to both client-side and server-side bundles
     const isDevBuild = !(env && env.prod);
     const sharedConfig = {
+        mode: isDevBuild ? "development" : "production",
         stats: { modules: false },
         context: __dirname,
         resolve: { extensions: [ '.js', '.ts' ] },
@@ -64,16 +65,26 @@ module.exports = (env) => {
               tsConfigPath: './tsconfig.json',
               entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
               exclude: ['./**/*.server.ts']
-            }),
-            new webpack.optimize.UglifyJsPlugin({
-                output: {
-                    ascii_only: true,
-                }
-            }),
+            })
           ]),
         devtool: isDevBuild ? 'cheap-eval-source-map' : false,
         node: {
           fs: "empty"
+        },
+        optimization: {
+          minimizer: [].concat(isDevBuild ? [] : [
+            // we specify a custom UglifyJsPlugin here to get source maps in production
+            new UglifyJsPlugin({
+              cache: true,
+              parallel: true,
+              uglifyOptions: {
+                compress: false,
+                ecma: 6,
+                mangle: true
+              },
+              sourceMap: true
+            })
+          ])
         }
     });
 
@@ -105,13 +116,6 @@ module.exports = (env) => {
               {}
             )
         ] : [
-            new webpack.optimize.UglifyJsPlugin({
-                mangle: false,
-                compress: false,
-                output: {
-                    ascii_only: true,
-                }
-            }),
             // Plugins that apply in production builds only
             new AngularCompilerPlugin({
               mainPath: path.join(__dirname, 'ClientApp/boot.server.PRODUCTION.ts'),
@@ -126,7 +130,22 @@ module.exports = (env) => {
         },
         target: 'node',
         // switch to "inline-source-map" if you want to debug the TS during SSR
-        devtool: isDevBuild ? 'cheap-eval-source-map' : false
+        devtool: isDevBuild ? 'cheap-eval-source-map' : false,
+        optimization: {
+          minimizer: [].concat(isDevBuild ? [] : [
+            // we specify a custom UglifyJsPlugin here to get source maps in production
+            new UglifyJsPlugin({
+              cache: true,
+              parallel: true,
+              uglifyOptions: {
+                compress: false,
+                ecma: 6,
+                mangle: true
+              },
+              sourceMap: true
+            })
+          ])
+        }
     });
 
     return [clientBundleConfig, serverBundleConfig];