refactor: Angular v11 update and AngularJS and Material updates

Splaktar · Splaktar · commit 320a105cab8c · 2020-11-12T03:37:46.000-05:00
- enable more strict flags and fix related issues
diff --git a/angular.json b/angular.json
@@ -25,7 +25,6 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "aot": true,
-            "extractCss": true,
             "outputPath": "dist/",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -55,7 +54,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,56 +19,55 @@
     "update": "npm-check -u"
   },
   "dependencies": {
-    "@angular/animations": "10.0.6",
-    "@angular/cdk": "10.1.1",
-    "@angular/common": "10.0.6",
-    "@angular/compiler": "10.0.6",
-    "@angular/core": "10.0.6",
-    "@angular/fire": "^6.0.2",
-    "@angular/forms": "10.0.6",
-    "@angular/material": "10.1.1",
-    "@angular/platform-browser": "10.0.6",
-    "@angular/platform-browser-dynamic": "10.0.6",
-    "@angular/upgrade": "10.0.6",
+    "@angular/animations": "11.0.0",
+    "@angular/cdk": "11.0.0",
+    "@angular/common": "11.0.0",
+    "@angular/compiler": "11.0.0",
+    "@angular/core": "11.0.0",
+    "@angular/fire": "^6.0.5",
+    "@angular/forms": "11.0.0",
+    "@angular/material": "11.0.0",
+    "@angular/platform-browser": "11.0.0",
+    "@angular/platform-browser-dynamic": "11.0.0",
+    "@angular/upgrade": "11.0.0",
     "@schuchard/prettier": "^3.1.0",
-    "@types/angular": "^1.7.2",
-    "@types/angular-material": "^1.1.71",
-    "angular": "^1.8.0",
-    "angular-animate": "^1.8.0",
-    "angular-aria": "^1.8.0",
-    "angular-material": "^1.2.0-rc.2",
-    "angular-messages": "^1.8.0",
-    "angular-sanitize": "^1.8.0",
-    "firebase": "^7.17.1",
-    "rxjs": "^6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "@types/angular": "^1.8.0",
+    "@types/angular-material": "^1.1.72",
+    "angular": "^1.8.2",
+    "angular-animate": "^1.8.2",
+    "angular-aria": "^1.8.2",
+    "angular-material": "^1.2.1",
+    "angular-messages": "^1.8.2",
+    "angular-sanitize": "^1.8.2",
+    "firebase": "^8.0.1",
+    "rxjs": "^6.6.3",
+    "tslib": "^2.0.3",
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1000.4",
-    "@angular-devkit/build-angular": "~0.1000.4",
-    "@angular/cli": "~10.0.4",
-    "@angular/compiler-cli": "~10.0.6",
-    "@angular/language-service": "~10.0.6",
-    "@types/gulp": "^4.0.6",
-    "@types/node": "^14.0.27",
-    "codelyzer": "^6.0.0-next.1",
+    "@angular-devkit/build-angular": "~0.1100.0",
+    "@angular/cli": "~11.0.0",
+    "@angular/compiler-cli": "~11.0.0",
+    "@angular/language-service": "~11.0.0",
+    "@types/gulp": "^4.0.7",
+    "@types/node": "^14.14.7",
+    "codelyzer": "^6.0.1",
     "debug": "^4.1.1",
-    "firebase-tools": "^8.6.0",
-    "gulp": "^4.0.2",
-    "gulp-angular-templatecache": "^3.0.0",
-    "gulp-htmlmin": "^5.0.1",
-    "husky": "4.2.5",
-    "lint-staged": "^10.2.11",
+    "firebase-tools": "^8.16.0",
+    "gulp": "~4.0.2",
+    "gulp-angular-templatecache": "~3.0.0",
+    "gulp-htmlmin": "~5.0.1",
+    "husky": "4.3.0",
+    "lint-staged": "^10.5.1",
     "npm-check": "^5.9.2",
-    "prettier": "2.0.5",
-    "rxjs-tslint-rules": "^4.34.0",
-    "source-map-explorer": "^2.4.2",
-    "ts-node": "^8.10.2",
-    "tslint": "~6.1.0",
+    "prettier": "2.1.2",
+    "rxjs-tslint-rules": "^4.34.5",
+    "source-map-explorer": "^2.5.0",
+    "ts-node": "^9.0.0",
+    "tslint": "~6.1.3",
     "tslint-config-prettier": "1.18.0",
     "tsutils": "^3.17.1",
-    "typescript": "~3.9.5"
+    "typescript": "~4.0.5"
   },
   "husky": {
     "hooks": {
diff --git a/src/.browserslistrc b/src/.browserslistrc
@@ -5,8 +5,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+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
-not dead
-not IE 9-10 # For IE 9-10 support, remove 'not'.
+IE 11
diff --git a/src/app/angular/app.component.ts b/src/app/angular/app.component.ts
@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class AppComponent {
   static selector = 'appComponent';
-  @Input() name: string;
+  @Input() name: string = 'Material';
 }
diff --git a/src/app/angularjs/app-angularjs.module.ts b/src/app/angularjs/app-angularjs.module.ts
@@ -15,7 +15,7 @@ import { bootstrapAngular } from './bootstrap-module';
 
 const downgradedModule = downgradeModule(bootstrapAngular);
 
-const configFunction = ($mdThemingProvider, $mdGestureProvider) => {
+const configFunction = ($mdThemingProvider: any, $mdGestureProvider: any) => {
   $mdThemingProvider
     .theme('default')
     .primaryPalette('indigo')
diff --git a/src/app/angularjs/tabs.component.ts b/src/app/angularjs/tabs.component.ts
@@ -1,5 +1,6 @@
 import { Directive, ElementRef, Injector } from '@angular/core';
 import { UpgradeComponent } from '@angular/upgrade/static';
+import { IScope } from 'angular';
 
 export const tabsComponent = {
   selector: 'ng1-tabs',
@@ -8,7 +9,7 @@ export const tabsComponent = {
     static $inject = ['$scope'];
     $digestCount = 0;
 
-    constructor($scope) {
+    constructor($scope: IScope) {
       this.$digestCount = 0;
       $scope.$watch(() => {
         this.$digestCount++;
diff --git a/src/app/angularjs/version-stamp.component.ts b/src/app/angularjs/version-stamp.component.ts
@@ -3,6 +3,7 @@ import { Directive, ElementRef, Injector, VERSION } from '@angular/core';
 import { VERSION as cdkVersion } from '@angular/cdk';
 import { VERSION as matVersion } from '@angular/material/core';
 import { UpgradeComponent } from '@angular/upgrade/static';
+import { IWindowService } from 'angular';
 
 export const versionStampComponent = {
   selector: 'version-stamp',
@@ -41,7 +42,7 @@ export const versionStampComponent = {
     static $inject = ['$window'];
     versions: object;
 
-    constructor($window) {
+    constructor($window: IWindowService) {
       this.versions = {
         angularjs: angular.version,
         md: $window.ngMaterial.version.full,
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "types": []
diff --git a/tsconfig.base.json b/tsconfig.base.json
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,14 +1,27 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./src/tsconfig.app.json"
-    }
-  ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "resolveJsonModule": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core';`
`7`	`7`	`})`
`8`	`8`	`export class AppComponent {`
`9`	`9`	`static selector = 'appComponent';`
`10`		`- @Input() name: string;`
	`10`	`+ @Input() name: string = 'Material';`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": "../tsconfig.base.json",`
	`2`	`+ "extends": "../tsconfig.json",`
`3`	`3`	`"compilerOptions": {`
`4`	`4`	`"outDir": "../out-tsc/app",`
`5`	`5`	`"types": []`