Merge pull request #10961 from isaac2004/5431-work

Updated Angular from 7.2.5 to 8.0 using ng update #5431

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/angular.json

@@ -20,9 +20,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": [
+            "assets": ["src/assets"],
-              "src/assets"
-            ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
@@ -73,25 +71,16 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
+            "styles": ["styles.css"],
-              "styles.css"
-            ],
             "scripts": [],
-            "assets": [
+            "assets": ["src/assets"]
-              "src/assets"
-            ]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-              "src/tsconfig.app.json",
+            "exclude": ["**/node_modules/**"]
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
           }
         },
         "server": {
@@ -137,9 +126,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
+            "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
           }
         }
       }

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/protractor.conf.js

@@ -1,28 +1,28 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter } = require("jasmine-spec-reporter");
 
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
+  specs: ["./src/**/*.e2e-spec.ts"],
-    './src/**/*.e2e-spec.ts'
-  ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: "chrome"
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: "http://localhost:4200/",
-  framework: 'jasmine',
+  framework: "jasmine",
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
   onPrepare() {
-    require('ts-node').register({
+    require("ts-node").register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
+      project: require("path").join(__dirname, "./tsconfig.e2e.json")
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine
+      .getEnv()
+      .addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/tsconfig.e2e.json

@@ -10,4 +10,4 @@
       "node"
     ]
   }
-}
+}

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json

@@ -12,35 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.2.15",
+    "@angular/animations": "8.0.0",
-    "@angular/common": "7.2.15",
+    "@angular/common": "8.0.0",
-    "@angular/compiler": "7.2.15",
+    "@angular/compiler": "8.0.0",
-    "@angular/core": "7.2.15",
+    "@angular/core": "8.0.0",
-    "@angular/forms": "7.2.15",
+    "@angular/forms": "8.0.0",
-    "@angular/http": "7.2.15",
+    "@angular/platform-browser": "8.0.0",
-    "@angular/platform-browser": "7.2.15",
+    "@angular/platform-browser-dynamic": "8.0.0",
-    "@angular/platform-browser-dynamic": "7.2.15",
+    "@angular/platform-server": "8.0.0",
-    "@angular/platform-server": "7.2.15",
+    "@angular/router": "8.0.0",
-    "@angular/router": "7.2.15",
+    "@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
-    "@nguniversal/module-map-ngfactory-loader": "7.1.0",
+    "core-js": "^2.6.5",
+    "rxjs": "^6.4.0",
+    "zone.js": "~0.9.1",
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^4.3.1",
-    "core-js": "^2.6.5",
     "jquery": "3.4.1",
     "oidc-client": "^1.8.0",
-    "popper.js": "^1.14.3",
+    "popper.js": "^1.14.3"
-    "rxjs": "^6.4.0",
-    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.9",
+    "@angular-devkit/build-angular": "^0.800.6",
-    "@angular/cli": "~7.3.5",
+    "@angular/cli": "8.0.6",
-    "@angular/compiler-cli": "^7.2.8",
+    "@angular/compiler-cli": "8.0.0",
-    "@angular/language-service": "^7.2.5",
+    "@angular/language-service": "8.0.0",
     "@types/jasmine": "~3.3.9",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "~11.10.5",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~3.3.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.0.0",
@@ -48,7 +47,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.5",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
-    "typescript": "~3.2.4"
+    "typescript": "3.4.5"
   },
   "optionalDependencies": {
     "node-sass": "^4.9.3",

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/app.module.ts

@@ -27,26 +27,26 @@ import { AuthorizeInterceptor } from 'src/api-authorization/authorize.intercepto
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
-////#if (IndividualLocalAuth)
+    ////#if (IndividualLocalAuth)
     ApiAuthorizationModule,
-////#endif
+    ////#endif
     RouterModule.forRoot([
       { path: '', component: HomeComponent, pathMatch: 'full' },
       { path: 'counter', component: CounterComponent },
-////#if (IndividualLocalAuth)
+      ////#if (IndividualLocalAuth)
       { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] },
-////#else
+      ////#else
       { path: 'fetch-data', component: FetchDataComponent },
-////#endif
+      ////#endif
     ])
   ],
-////#if (IndividualLocalAuth)
+  ////#if (IndividualLocalAuth)
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
   ],
-////#else
+  ////#else
   providers: [],
-////#endif
+  ////#endif
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/nav-menu/nav-menu.component.html

@@ -1,24 +1,44 @@
 <header>
-  <nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>
+  <nav
+    class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
+  >
     <div class="container">
-      <a class="navbar-brand" [routerLink]='["/"]'>Company.WebApplication1</a>
+      <a class="navbar-brand" [routerLink]="['/']">Company.WebApplication1</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
+      <button
-        [attr.aria-expanded]="isExpanded" (click)="toggle()">
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target=".navbar-collapse"
+        aria-label="Toggle navigation"
+        [attr.aria-expanded]="isExpanded"
+        (click)="toggle()"
+      >
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
+      <div
+        class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"
+        [ngClass]="{ show: isExpanded }"
+      >
         <!--#if (IndividualLocalAuth) -->
         <app-login-menu></app-login-menu>
         <!--#endif -->
         <ul class="navbar-nav flex-grow">
-          <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
+          <li
-            <a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
+            class="nav-item"
+            [routerLinkActive]="['link-active']"
+            [routerLinkActiveOptions]="{ exact: true }"
+          >
+            <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
           </li>
-          <li class="nav-item" [routerLinkActive]='["link-active"]'>
+          <li class="nav-item" [routerLinkActive]="['link-active']">
-            <a class="nav-link text-dark" [routerLink]='["/counter"]'>Counter</a>
+            <a class="nav-link text-dark" [routerLink]="['/counter']"
+              >Counter</a
+            >
           </li>
-          <li class="nav-item" [routerLinkActive]='["link-active"]'>
+          <li class="nav-item" [routerLinkActive]="['link-active']">
-            <a class="nav-link text-dark" [routerLink]='["/fetch-data"]'>Fetch data</a>
+            <a class="nav-link text-dark" [routerLink]="['/fetch-data']"
+              >Fetch data</a
+            >
           </li>
         </ul>
       </div>

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/index.html

@@ -1,14 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
-  <title>Company.WebApplication1</title>
+    <title>Company.WebApplication1</title>
-  <base href="/">
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-</head>
+  </head>
-<body>
+  <body>
-  <app-root>Loading...</app-root>
+    <app-root>Loading...</app-root>
-</body>
+  </body>
 </html>

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/polyfills.ts

@@ -11,70 +11,53 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/styles.css

@@ -6,7 +6,7 @@ a {
 }
 
 code {
-  color: #E01A76;
+  color: #e01a76;
 }
 
 .btn-primary {

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "types": []
   },
   "exclude": [

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/tsconfig.server.json

@@ -1,9 +1,9 @@
 {
-    "extends": "../tsconfig.json",
+  "extends": "../tsconfig.json",
-    "compilerOptions": {
+  "compilerOptions": {
-      "module": "commonjs"
+    "module": "commonjs"
-    },
+  },
-    "angularCompilerOptions": {
+  "angularCompilerOptions": {
-      "entryModule": "app/app.server.module#AppServerModule"
+    "entryModule": "app/app.server.module#AppServerModule"
-    }
+  }
 }

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/tsconfig.spec.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
     "types": [
       "jasmine",
       "node"

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tsconfig.json

@@ -2,13 +2,14 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "module": "esnext",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tslint.json

@@ -117,12 +117,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true

src/ProjectTemplates/test/template-baselines.json

@@ -1144,7 +1144,7 @@
         "ClientApp/src/assets/.gitkeep",
         "ClientApp/src/environments/environment.prod.ts",
         "ClientApp/src/environments/environment.ts",
-        "ClientApp/src/browserslist",
+        "ClientApp/browserslist",
         "ClientApp/src/index.html",
         "ClientApp/src/karma.conf.js",
         "ClientApp/src/main.ts",