Atualização do Angular (14 > 15)

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -40,6 +41,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.tool-versions
 
 # System Files
 .DS_Store

angular.json

@@ -28,7 +28,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -40,7 +39,17 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.sass"
             ],
-            "scripts": []
+            "allowedCommonJsDependencies": [
+              "moment",
+              "ngx-csv/ngx-csv"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -70,7 +79,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -108,19 +118,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": {
@@ -135,6 +132,5 @@
         }
       }
     }
-  },
-  "defaultProject": "querido-diario"
+  }
 }

netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  publish = "dist/querido-diario"
+  command = "ng build --configuration production"
+  environment = { NODE_VERSION = "16.13.0" }

package.json

@@ -5,54 +5,54 @@
     "ng": "ng",
     "start": "node server.js",
     "serve": "ng serve",
-    "build": "ng build --prod",
-    "heroku-postbuild": "ng build --prod",
+    "build": "ng build --configuration production",
+    "heroku-postbuild": "ng build --configuration production",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "engines": {
-    "node": "16.2.0",
-    "npm": "7.10.0"
+    "node": "16.13.0",
+    "npm": "7.24.0"
   },
   "dependencies": {
-    "@angular/animations": "~11.2.11",
-    "@angular/cdk": "^11.2.11",
-    "@angular/common": "~11.2.11",
-    "@angular/compiler": "~11.2.11",
-    "@angular/core": "~11.2.11",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
     "@angular/flex-layout": "12.0.0-beta.34",
-    "@angular/forms": "~11.2.11",
-    "@angular/material": "^11.2.11",
-    "@angular/material-moment-adapter": "^12.0.2",
-    "@angular/platform-browser": "~11.2.11",
-    "@angular/platform-browser-dynamic": "~11.2.11",
-    "@angular/router": "~11.2.11",
-    "@datorama/akita": "^7.1.1",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/material-moment-adapter": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@datorama/akita": "^8.0.1",
     "angular-responsive-carousel": "^2.0.2",
     "express": "^4.17.1",
     "moment": "^2.29.1",
     "ngx-csv": "^0.3.2",
     "ngx-mask": "11.0.0",
     "ngx-pagination": "^5.1.0",
     "path": "^0.12.7",
-    "rxjs": "~6.6.0",
+    "rxjs": "~7.4.0",
     "tslib": "^2.0.0",
-    "typescript": "~4.1.5",
-    "zone.js": "~0.11.3"
+    "typescript": "~4.9.5",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.10",
-    "@angular/cli": "~11.2.10",
-    "@angular/compiler-cli": "~11.2.11",
+    "@angular-devkit/build-angular": "^15.2.11",
+    "@angular/cli": "^15.2.11",
+    "@angular/compiler-cli": "^15.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "autoprefixer": "^10.4.7",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
@@ -61,7 +61,6 @@
     "protractor": "~7.0.0",
     "tailwindcss": "^3.0.24",
     "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.1.5"
+    "tslint": "~6.1.0"
   }
 }

src/app/app.module.ts

@@ -3,20 +3,20 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Event, Router, Scroll } from '@angular/router';

src/app/modules/components/aggregate-data/aggregate-data.component.sass

@@ -64,15 +64,15 @@
     .selected
       background: #ff8500
 
-.year-list::-webkit-scrollbar 
+.year-list::-webkit-scrollbar
   width: 8px
 
-.year-list::-webkit-scrollbar-thumb 
+.year-list::-webkit-scrollbar-thumb
   background-color: #ff8500
   border-radius: 4px
   margin-right: -8px
 
-.year-list::-webkit-scrollbar-thumb:hover 
+.year-list::-webkit-scrollbar-thumb:hover
   background-color: #ff8500
 
 .aggregate-data
@@ -111,20 +111,20 @@
         background: #5e3f8e !important
         color: white !important
         padding-bottom: 16px !important
-        
-@media only screen and (max-width: 768px) 
+
+@media only screen and (max-width: 768px)
   .mobile
     flex-direction: column !important
 
   .header-section
     flex-direction: column
-    align-items:flex-start
+    align-items: flex-start
 
   .aggregate-data
     flex-wrap: wrap
     flex-direction: column
     width: 100%
-    padding: 8px 0 
+    padding: 8px 0
 
     .year-aggregate-info
       width: 100%
@@ -141,6 +141,6 @@
   .year-selection
     width: 100% !important
 
-  .year-list::-webkit-scrollbar 
-    height: 2px 
-  
+  .year-list::-webkit-scrollbar
+    height: 2px
+

src/app/modules/components/date-picker-range/date-picker-range.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import {
   MAT_MOMENT_DATE_ADAPTER_OPTIONS,
   MomentDateAdapter,
@@ -44,7 +44,7 @@ export class DatePickerRangeComponent implements OnInit {
     start: Moment;
     end: Moment;
   }>();
-  range: FormGroup = new FormGroup({});
+  range: UntypedFormGroup = new UntypedFormGroup({});
   maxDate: Date = new Date();
   subscriptions: Subscription[] = [];
 
@@ -53,9 +53,9 @@ export class DatePickerRangeComponent implements OnInit {
   ngOnInit(): void {
     this.subscriptions.push(
       this.route.queryParams.subscribe((params) => {
-        this.range = new FormGroup({
-          start: new FormControl(params.since),
-          end: new FormControl(params.until),
+        this.range = new UntypedFormGroup({
+          start: new UntypedFormControl(params.since),
+          end: new UntypedFormControl(params.until),
         });
       })
     );

src/app/modules/components/header/header.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild, HostListener } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { UserModel } from 'src/app/interfaces/account';
 import { IconType } from 'src/app/interfaces/icon';

src/app/modules/components/modal/modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { IconType } from 'src/app/interfaces/icon';
 import { ContentService } from 'src/app/services/content/content.service';
 import { NotificationsComponent } from '../notifications/notifications.component';

src/app/modules/components/period-picker/period-picker.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import {
   MAT_MOMENT_DATE_ADAPTER_OPTIONS,
   MomentDateAdapter,
@@ -37,14 +37,14 @@ export class PeriodPickerComponent implements OnInit {
     to: '',
   };
   @Output() rangeSelected: EventEmitter<PeriodRange> = new EventEmitter();
-  range: FormGroup = new FormGroup({});
+  range: UntypedFormGroup = new UntypedFormGroup({});
 
   constructor() {}
 
   ngOnInit(): void {
-    this.range = new FormGroup({
-      start: new FormControl(new Date(this.initialValue.from) || ''),
-      end: new FormControl(new Date(this.initialValue.to) || ''),
+    this.range = new UntypedFormGroup({
+      start: new UntypedFormControl(new Date(this.initialValue.from) || ''),
+      end: new UntypedFormControl(new Date(this.initialValue.to) || ''),
     });
   }
 

src/app/modules/components/search-form/search-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Moment } from 'moment';
 import { Observable, Subscription } from 'rxjs';
@@ -17,7 +17,7 @@ import { DownloadCSVService } from './../../../services/download-csv/download-cs
   styleUrls: ['./search-form.component.sass'],
 })
 export class SearchFormComponent implements OnInit {
-  termControl = new FormControl();
+  termControl = new UntypedFormControl();
 
   @Input()
   form: any;
@@ -34,7 +34,7 @@ export class SearchFormComponent implements OnInit {
 
   filteredOptions: Observable<string[]> = new Observable();
 
-  cityControl = new FormControl();
+  cityControl = new UntypedFormControl();
   territories: Territory[] = [];
   selectedCities: Territory[] = [];
   territory: string[] = [];

src/app/modules/components/section/section.component.sass

@@ -1,9 +1,6 @@
 @import 'src/assets/_tools.sass'
 @import 'src/assets/_variables.sass'
 
-:host
-  .purpledarker
-
 .container
   width: rem(1220)
 
@@ -27,4 +24,4 @@ p
   font-size: 16px
   font-weight: 600
   letter-spacing: 0
-  line-height: 28px
+  line-height: 28px