feat: update to Angular 13, move from tslint to eslint (#5957)

* feat: update to Angular 13

* feat: update to Angular 13, move from tslint to eslint

.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "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/no-input-rename": [
+          "warn",
+          {
+            "allowedNames": ["name"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -23,6 +23,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -148,20 +148,18 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "typeCheck": true,
-            "exclude": []
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     },
     "ngx-admin-demo-e2e": {
-      "root": "",
+      "root": "e2e",
       "sourceRoot": "",
       "projectType": "application",
       "architect": {
@@ -171,15 +169,6 @@
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "ngx-admin-demo:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
         }
       }
     }

e2e/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "e2e/tsconfig.app.json",
+          "e2e/tsconfig.spec.json",
+          "e2e/e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package.json

@@ -30,21 +30,21 @@
     "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
   },
   "dependencies": {
-    "@angular/animations": "^12.2.16",
+    "@angular/animations": "^13.3.12",
     "@angular/cdk": "12.1.0",
-    "@angular/common": "^12.2.16",
-    "@angular/compiler": "^12.2.16",
-    "@angular/core": "^12.2.16",
-    "@angular/forms": "^12.2.16",
+    "@angular/common": "^13.3.12",
+    "@angular/compiler": "^13.3.12",
+    "@angular/core": "^13.3.12",
+    "@angular/forms": "^13.3.12",
     "@angular/google-maps": "^12.2.13",
-    "@angular/platform-browser": "^12.2.16",
-    "@angular/platform-browser-dynamic": "^12.2.16",
-    "@angular/router": "^12.2.16",
+    "@angular/platform-browser": "^13.3.12",
+    "@angular/platform-browser-dynamic": "^13.3.12",
+    "@angular/router": "^13.3.12",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "8.0.0",
-    "@nebular/eva-icons": "8.0.0",
-    "@nebular/security": "8.0.0",
-    "@nebular/theme": "8.0.0",
+    "@nebular/auth": "9.1.0-rc.8",
+    "@nebular/eva-icons": "9.1.0-rc.8",
+    "@nebular/security": "9.1.0-rc.8",
+    "@nebular/theme": "9.1.0-rc.8",
     "@swimlane/ngx-charts": "^14.0.0",
     "angular2-chartjs": "0.4.1",
     "bootstrap": "4.3.1",
@@ -77,10 +77,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.1.4",
-    "@angular/cli": "^12.2.17",
-    "@angular/compiler-cli": "^12.2.16",
-    "@angular/language-service": "12.1.0",
+    "@angular-devkit/build-angular": "^13.3.10",
+    "@angular-eslint/builder": "13.5.0",
+    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular-eslint/eslint-plugin-template": "13.5.0",
+    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/template-parser": "13.5.0",
+    "@angular/cli": "^13.3.10",
+    "@angular/compiler-cli": "^13.3.12",
+    "@angular/language-service": "13.3.12",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
@@ -88,8 +93,11 @@
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
     "@types/node": "^12.12.70",
+    "@typescript-eslint/eslint-plugin": "5.27.1",
+    "@typescript-eslint/parser": "5.27.1",
     "codelyzer": "^6.0.2",
     "conventional-changelog-cli": "1.3.4",
+    "eslint": "^8.17.0",
     "husky": "0.13.3",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -106,6 +114,6 @@
     "ts-node": "3.2.2",
     "tslint": "~6.1.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "~4.2.3||~4.3.0"
+    "typescript": "~4.6.4"
   }
 }

src/app/pages/dashboard/rooms/room-selector/room-selector.component.html

@@ -78,7 +78,7 @@
               [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
       </g>
 
-      <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
+      <g [attr.id]="room.id" [class.selected-room]="selectedRoom === room.id" *ngFor="let room of sortedRooms">
         <path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
         <path class="room-border" [attr.d]="room.border.d" />
         <path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />

src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -14,7 +14,7 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   private hideGrid: boolean;
 
-  @Output() select: EventEmitter<number> = new EventEmitter();
+  @Output() selectEvent: EventEmitter<number> = new EventEmitter();
 
   selectedRoom = null;
   sortedRooms = [];
@@ -108,7 +108,7 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   }
 
   selectRoom(roomNumber) {
-    this.select.emit(roomNumber);
+    this.selectEvent.emit(roomNumber);
     this.selectedRoom = roomNumber;
     this.sortRooms();
   }

src/app/pages/dashboard/solar/solar.component.ts

@@ -25,7 +25,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
 
   private value = 0;
 
-  @Input('chartValue')
+  @Input()
   set chartValue(value: number) {
     this.value = value;
 

src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts

@@ -19,7 +19,7 @@ export class CountryOrdersMapComponent implements OnDestroy {
 
   @Input() countryId: string;
 
-  @Output() select: EventEmitter<any> = new EventEmitter();
+  @Output() selectEvent: EventEmitter<any> = new EventEmitter();
 
   layers = [];
   currentTheme: any;
@@ -124,7 +124,7 @@ export class CountryOrdersMapComponent implements OnDestroy {
       this.resetHighlight(this.selectedCountry);
       this.highlightFeature(featureLayer);
       this.selectedCountry = featureLayer;
-      this.select.emit(featureLayer.feature.properties.name);
+      this.selectEvent.emit(featureLayer.feature.properties.name);
     }
   }
 

src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts

@@ -1,11 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, HostListener } from '@angular/core';
 import { NbCalendarDayCellComponent } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-day-cell',
   templateUrl: 'day-cell.component.html',
   styleUrls: ['day-cell.component.scss'],
-  host: { '(click)': 'onClick()', 'class': 'day-cell' },
 })
 export class DayCellComponent extends NbCalendarDayCellComponent<Date> {
+  @HostBinding('class') classes = 'day-cell';
+
+  @HostListener('click') onClick() {
+    // do work
+  }
 }

src/test.ts

@@ -28,7 +28,9 @@ __karma__.loaded = function () {};
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false },
+},
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);