[#11345] Update Angular to 12

.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.github/workflows/e2e-cross.yml

@@ -46,7 +46,7 @@ jobs:
       - name: Install Frontend Dependencies
         run: npm ci
       - name: Build Frontend Bundle
-        run: npm run build -- --progress=false --serviceWorker=false
+        run: npm run build
       - name: Start Server
         if: matrix.os == 'ubuntu-latest'
         run: |

.github/workflows/e2e.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install Frontend Dependencies
         run: npm ci 
       - name: Build Frontend Bundle 
-        run: npm run build -- --progress=false --serviceWorker=false 
+        run: npm run build
       - name: Start Server
         run: |
           ./gradlew serverRun &

angular.json

@@ -10,7 +10,8 @@
       "prefix": "tm",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "strict": true
         }
       },
       "architect": {
@@ -22,7 +23,10 @@
             "main": "src/web/main.ts",
             "polyfills": "src/web/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
+            "allowedCommonJsDependencies": [
+              "core-js",
+              "moment-timezone"
+            ],
             "assets": [
               "src/web/assets/"
             ],
@@ -51,15 +55,16 @@
                 "src/web/sitemap.xml",
                 "src/web/manifest.webmanifest"
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": true,
-              "aot": true,
-              "extractLicenses": false,
-              "vendorChunk": true,
-              "buildOptimizer": true,
+              "subresourceIntegrity": true,
               "serviceWorker": true,
               "ngswConfigPath": "ngsw-config.json",
               "budgets": [
@@ -74,19 +79,29 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "development": {
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "optimization": false,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "teammates:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "teammates:build:production"
+            },
+            "development": {
+              "browserTarget": "teammates:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -101,19 +116,19 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         }
       }
     }
   },
-  "defaultProject": "teammates"
+  "defaultProject": "teammates",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

docs/setting-up.md

@@ -45,9 +45,9 @@ These tools are necessary regardless of whether you are developing front-end or
 If you want to develop front-end, you need to install the following:
 
 1. Install Node.js (minimum version 12.11.1).
-1. (Optional but highly recommended) Install Angular CLI version 9 globally.
+1. (Optional but highly recommended) Install Angular CLI version 12 globally.
    ```sh
-   npm install -g @angular/cli@9
+   npm install -g @angular/cli@12
    ```
    **Verification:** Run `ng` and you should see a list of available Angular CLI commands.
 

docs/static-analysis.md

@@ -20,8 +20,7 @@ The version number of all the tool stacks are declared in `build.gradle` or `pac
 | [PMD](https://pmd.github.io/) | [`teammates-pmd.xml`](../static-analysis/teammates-pmd.xml), [`teammates-pmdMain.xml`](../static-analysis/teammates-pmdMain.xml) |
 | [SpotBugs](https://spotbugs.github.io/) | [`teammates-spotbugs.xml`](../static-analysis/teammates-spotbugs.xml) |
 | [ArchUnit](https://github.com/TNG/ArchUnit) | - |
-| [TSLint](https://palantir.github.io/tslint/) | [`teammates-tslint.yml`](../static-analysis/teammates-tslint.yml) |
-| [JSONlint](https://github.com/marionebl/jsonlint-cli) | - |
+| [ESLint](https://eslint.org/) | [`teammates-eslint.yml`](../static-analysis/teammates-eslint.yml) |
 | [stylelint](http://stylelint.io) | [`teammates-stylelint.yml`](../static-analysis/teammates-stylelint.yml) |
 | [lintspaces](https://github.com/evanshortiss/lintspaces-cli) | - |
 
@@ -47,8 +46,7 @@ General rule of thumb when suppressing rules:
 | PMD | `./gradlew pmdMain`, `./gradlew pmdTest` |
 | SpotBugs | `./gradlew spotbugsMain`, `./gradlew spotbugsTest` |
 | ArchUnit | `./gradlew architectureTest` |
-| TSLint | `npm run lint:ts` |
-| JSONlint | `npm run lint:json` |
+| ESLint | `npm run lint:ts` |
 | stylelint | `npm run lint:css` |
 | lintspaces | `npm run lint:spaces` |