Atualização do Angular (13 > 14)

.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,13 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.sass"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -70,7 +75,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -108,19 +114,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 +128,5 @@
         }
       }
     }
-  },
-  "defaultProject": "querido-diario"
+  }
 }

netlify.toml

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

package.json

@@ -5,30 +5,30 @@
     "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.10.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": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
     "@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",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/material-moment-adapter": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@datorama/akita": "^7.1.1",
     "angular-responsive-carousel": "^2.0.2",
     "express": "^4.17.1",
@@ -39,20 +39,20 @@
     "path": "^0.12.7",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "typescript": "~4.1.5",
-    "zone.js": "~0.11.3"
+    "typescript": "~4.6.4",
+    "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": "^14.2.13",
+    "@angular/cli": "^14.2.13",
+    "@angular/compiler-cli": "^14.3.0",
     "@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/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/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

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

@@ -5,7 +5,7 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Option } from 'src/app/interfaces/option';
 
 @Component({
@@ -28,7 +28,7 @@ export class SelectComponent implements OnInit {
   @Input()
   selected: any;
 
-  selectControl = new FormControl({});
+  selectControl = new UntypedFormControl({});
 
   constructor() {}
 
@@ -42,7 +42,7 @@ export class SelectComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.selected) {
-      this.selectControl = new FormControl(this.selected);
+      this.selectControl = new UntypedFormControl(this.selected);
     }
   }
 

src/app/modules/pages/area-education/header/login-form/login-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { LoginService } from 'src/app/services/login/login.service';
 import { UserService } from 'src/app/stores/user/user.service';
@@ -16,7 +16,7 @@ export class LoginFormComponent implements OnInit {
   @Output() onShowResetForm: EventEmitter<boolean> = new EventEmitter();
   @Output() onLoggedIn: EventEmitter<boolean> = new EventEmitter();
   @Output() onSetEmail: EventEmitter<string> = new EventEmitter();
-  formGroup: FormGroup = {} as FormGroup;
+  formGroup: UntypedFormGroup = {} as UntypedFormGroup;
   loading = false;
   showPass = false;
   errorMessage = '';
@@ -28,9 +28,9 @@ export class LoginFormComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.formGroup = new FormGroup({
-      password: new FormControl(null, [Validators.required]),
-      email: new FormControl(null, [Validators.required, Validators.maxLength(100), Validators.email]),
+    this.formGroup = new UntypedFormGroup({
+      password: new UntypedFormControl(null, [Validators.required]),
+      email: new UntypedFormControl(null, [Validators.required, Validators.maxLength(100), Validators.email]),
     });
   }