SPA Angular 11->12 updates (#33353)

Author: HaoK

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

@@ -1,6 +1,6 @@
 # Company.WebApplication1
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.2.
 
 ## Development server
 
@@ -12,15 +12,15 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Running unit tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help
 

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/README.md

@@ -4,11 +4,15 @@
   "newProjectRoot": "projects",
   "projects": {
     "Company.WebApplication1": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -30,35 +34,49 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "Company.WebApplication1:build",
-            "proxyConfig": "proxy.conf.js"
-          },
           "configurations": {
             "production": {
               "browserTarget": "Company.WebApplication1:build:production"
+            },
+            "development": {
+              "browserTarget": "Company.WebApplication1:build:development",
+              "proxyConfig": "proxy.conf.js"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -73,22 +91,13 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/assets"
+            ],
             "styles": [
               "src/styles.css"
             ],
-            "scripts": [],
-            "assets": [
-              "src/assets"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "scripts": []
           }
         },
         "server": {
@@ -118,32 +127,7 @@
           }
         }
       }
-    },
-    "Company.WebApplication1-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "Company.WebApplication1:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "e2e//**/*.ts",
-              "e2e//**/*.html"
-            ]
-          }
-        }
-      }
     }
   },
-  "defaultProject": "Company.WebApplication1",
-  "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
-  }
+  "defaultProject": "Company.WebApplication1"
 }

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

@@ -13,59 +13,44 @@
 //#endif
     "build": "ng build",
     "build:ssr": "ng run Company.WebApplication1:server:dev",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.2.11",
-    "@angular/common": "~11.2.11",
-    "@angular/compiler": "~11.2.11",
-    "@angular/core": "~11.2.11",
-    "@angular/forms": "~11.2.11",
-    "@angular/platform-browser": "~11.2.11",
-    "@angular/platform-browser-dynamic": "~11.2.11",
-    "@angular/platform-server": "~11.2.11",
-    "@angular/router": "~11.2.11",
+    "@angular/animations": "~12.0.2",
+    "@angular/common": "~12.0.2",
+    "@angular/compiler": "~12.0.2",
+    "@angular/core": "~12.0.2",
+    "@angular/forms": "~12.0.2",
+    "@angular/platform-browser": "~12.0.2",
+    "@angular/platform-browser-dynamic": "~12.0.2",
+    "@angular/platform-server": "~12.0.2",
+    "@angular/router": "~12.0.2",
     "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
     "bootstrap": "^4.6.0",
     "jquery": "^3.5.1",
     "oidc-client": "^1.11.3",
     "popper.js": "^1.16.0",
     "run-script-os": "^1.1.6",
     "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.11.3"
+    "tslib": "^2.1.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.10",
-    "@angular-eslint/builder": "4.0.0",
-    "@angular-eslint/eslint-plugin": "4.0.0",
-    "@angular-eslint/eslint-plugin-template": "4.0.0",
-    "@angular-eslint/schematics": "4.0.0",
-    "@angular-eslint/template-parser": "4.0.0",
-    "@angular/cli": "~11.2.10",
-    "@angular/compiler-cli": "~11.2.11",
-    "@types/jasmine": "^3.6.10",
+    "@angular-devkit/build-angular": "~12.0.2",
+    "@angular/cli": "~12.0.2",
+    "@angular/compiler-cli": "~12.0.2",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "4.16.1",
-    "@typescript-eslint/parser": "4.16.1",
-    "eslint": "^7.6.0",
-    "ini": "^1.3.7",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "jasmine-core": "~3.7.0",
+    "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "karma-spec-reporter": "0.0.32",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.4.1",
-    "typescript": "~4.1.5"
+    "typescript": "~4.2.3"
   },
   "optionalDependencies": {}
 }