Manual update to help Long Term Maintenance

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   test:
     working_directory: ~/boilerplate-client-angular
     docker:
-      - image: 'circleci/node:10-browsers'
+      - image: 'circleci/node:14.15.5-browsers'
     steps:
       - checkout
       - run: sudo apt-get update

.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -39,6 +39,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

Dockerfile

@@ -1,5 +1,5 @@
 # base image
-FROM node:12.2.0
+FROM node:14.15
 
 # install chrome for protractor tests
 RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
@@ -15,7 +15,7 @@ ENV PATH /app/node_modules/.bin:$PATH
 # install and cache app dependencies
 COPY package.json /app/package.json
 RUN npm install
-RUN npm install -g @angular/cli@9.1.6
+RUN npm install -g @angular/cli@13.0.2
 
 # add app
 COPY . /app

README.md

@@ -5,7 +5,7 @@
 | development | [![Shift3](https://circleci.com/gh/Shift3/boilerplate-client-angular.svg?style=shield&circle-token=f7e07709887f5d8310779f748d524c40756e2f8a)](https://circleci.com/gh/Shift3/boilerplate-client-angular)                     |
 | main        | [![Shift3](https://circleci.com/gh/Shift3/boilerplate-client-angular/tree/main.svg?style=shield&circle-token=f7e07709887f5d8310779f748d524c40756e2f8a)](https://circleci.com/gh/Shift3/boilerplate-client-angular/tree/main) |
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.6.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.2
 
 This boilerplate has a [wiki](https://github.com/Shift3/boilerplate-client-angular/wiki) which explains the project and its implementation in much greater detail than the code comments.
 

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "defaultCollection": "@angular-eslint/schematics"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -26,7 +27,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -42,7 +42,13 @@
                 "src/assets/styles"
               ]
             },
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -55,7 +61,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -83,9 +88,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -100,7 +103,8 @@
             "es5": {
               "tsConfig": "./tsconfig.es5.json"
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -150,19 +154,6 @@
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -174,9 +165,18 @@
               "devServerTarget": "boilerplate-client-angular:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "defaultProject": "boilerplate-client-angular"
-}
+}

e2e/protractor.conf.js

@@ -2,7 +2,7 @@
 // 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').SpecReporter;
 
 /**
  * @type { import("protractor").Config }
@@ -16,9 +16,8 @@ exports.config = {
       args: ['--no-sandbox', '--headless', '--window-size=1024,768'],
     },
   },
-  directConnect: true,
   baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+  framework: 'jasmine2',
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,

package.json

@@ -5,8 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build:staging": "ng build --prod --configuration=staging",
-    "deploy:staging": "ng build --prod --configuration=staging && aws s3 sync ./dist/<PROJECT_DIRECTORY_PATH> s3://<AWS_SANDBOX_URL> --profile shift3 --delete",
+    "build:staging": "ng build --configuration production --configuration=staging",
+    "deploy:staging": "ng build --configuration production --configuration=staging && aws s3 sync ./dist/<PROJECT_DIRECTORY_PATH> s3://<AWS_SANDBOX_URL> --profile shift3 --delete",
     "analyze": "webpack-bundle-analyzer dist/boilerplate-client-angular/stats-es2015.json",
     "build:stats": "ng build --stats-json",
     "test": "ng test",
@@ -17,55 +17,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.7",
-    "@angular/common": "~9.1.7",
-    "@angular/compiler": "~9.1.7",
-    "@angular/core": "~9.1.7",
-    "@angular/forms": "~9.1.7",
-    "@angular/localize": "~9.1.7",
-    "@angular/platform-browser": "~9.1.7",
-    "@angular/platform-browser-dynamic": "~9.1.7",
-    "@angular/router": "~9.1.7",
-    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
-    "@sentry/browser": "^5.15.5",
-    "bootstrap": "^4.4.0",
-    "classlist.js": "^1.1.20150312",
+    "@angular/animations": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
+    "@angular/localize": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@sentry/browser": "^6.14.3",
+    "bootstrap": "^5.1.3",
     "font-awesome": "^4.7.0",
-    "ngx-bootstrap": "^6.1.0",
-    "ngx-mask": "^10.0.1",
-    "ngx-toastr": "^13.0.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "ngx-bootstrap": "^7.1.0",
+    "ngx-mask": "^12.0.0",
+    "ngx-toastr": "^14.2.0",
+    "rxjs": "^7.4.0",
+    "tslib": "^2.3.1",
+    "yargs-parser": "^20.2.9",
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular/cli": "~9.1.6",
-    "@angular/compiler-cli": "~9.1.7",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "husky": "^4.3.0",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
+    "@angular-devkit/build-angular": "^13.0.2",
+    "@angular-eslint/builder": "12.6.1",
+    "@angular-eslint/eslint-plugin": "12.6.1",
+    "@angular-eslint/eslint-plugin-template": "12.6.1",
+    "@angular-eslint/schematics": "12.6.1",
+    "@angular-eslint/template-parser": "12.6.1",
+    "@angular/cli": "^13.0.2",
+    "@angular/compiler-cli": "^13.0.2",
+    "@types/jasmine": "~3.10.2",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/node": "^16.11.9",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "codelyzer": "^6.0.2",
+    "eslint": "^7.26.0",
+    "husky": "^7.0.4",
+    "jasmine-core": "~3.10.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "^6.3.8",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "ng-mocks": "^10.1.3",
-    "prettier": "^2.1.2",
-    "pretty-quick": "^3.0.2",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.3.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.7.0",
+    "ng-mocks": "^12.5.0",
+    "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.1",
+    "protractor": "^7.0.0",
+    "ts-node": "^10.4.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3",
-    "webpack-bundle-analyzer": "^4.4.0"
+    "typescript": "4.4.4",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   }
-}
+}

src/app/app-routing.module.ts

@@ -50,7 +50,7 @@ const routes: Routes = [
  * Root feature routing module. Loads all lazy loaded routes and root-level routes.
  */
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { MockComponent } from 'ng-mocks';
@@ -13,17 +13,19 @@ import { TopNavigationSmartComponent } from '@shared/components/navigation/top-n
 !environment.testIntegration
   ? Logger.log('Integration skipped')
   : describe('[Integration] AppComponent', () => {
-      beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [RouterTestingModule],
-          declarations: [
-            AppComponent,
-            MockComponent(FooterComponent),
-            MockComponent(SideNavigationSmartComponent),
-            MockComponent(TopNavigationSmartComponent),
-          ],
-        }).compileComponents();
-      }));
+      beforeEach(
+        waitForAsync(() => {
+          TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [
+              AppComponent,
+              MockComponent(FooterComponent),
+              MockComponent(SideNavigationSmartComponent),
+              MockComponent(TopNavigationSmartComponent),
+            ],
+          }).compileComponents();
+        }),
+      );
 
       it('should create the app', () => {
         const fixture = TestBed.createComponent(AppComponent);