upgrade to Angular 14

angular.json

@@ -130,7 +130,6 @@
       }
     }
   },
-  "defaultProject": "sartography-website",
   "schematics": {
     "@schematics/angular:component": {
       "style": "scss"

package.json

@@ -11,15 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.3.11",
+    "@angular/animations": "^14.2.2",
     "@angular/cdk": "^13.3.9",
-    "@angular/common": "^13.3.11",
-    "@angular/compiler": "^13.3.11",
-    "@angular/core": "^13.3.11",
-    "@angular/forms": "^13.3.11",
-    "@angular/platform-browser": "^13.3.11",
-    "@angular/platform-browser-dynamic": "^13.3.11",
-    "@angular/router": "^13.3.11",
+    "@angular/common": "^14.2.2",
+    "@angular/compiler": "^14.2.2",
+    "@angular/core": "^14.2.2",
+    "@angular/forms": "^14.2.2",
+    "@angular/platform-browser": "^14.2.2",
+    "@angular/platform-browser-dynamic": "^14.2.2",
+    "@angular/router": "^14.2.2",
     "core-js": "^2.6.9",
     "hammerjs": "^2.0.8",
     "ng-inline-svg": "^9.1.0",
@@ -30,9 +30,9 @@
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular/cli": "^13.3.9",
-    "@angular/compiler-cli": "^13.3.11",
-    "@angular/language-service": "^13.3.11",
+    "@angular/cli": "^14.2.2",
+    "@angular/compiler-cli": "^14.2.2",
+    "@angular/language-service": "^14.2.2",
     "@types/jasmine": "^4.3.0",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^12.11.1",
@@ -50,4 +50,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.6.4"
   }
-}
+}

src/app/app.module.ts

@@ -67,58 +67,49 @@ export class FormlyConfig {
 
 
 @NgModule({
-  declarations: [
-    AboutUsComponent,
-    AppComponent,
-    CaseStudiesComponent,
-    ContactUsComponent,
-    FooterComponent,
-    HeaderComponent,
-    LogoValuesComponent,
-    ScrollSpyDirective,
-    TeamComponent,
-    WelcomeComponent,
-    StyleGuideComponent,
-    HomeComponent,
-    TeamMemberComponent,
-    CaseStudyComponent,
-    CapabilityDetailsComponent,
-    BrandValueComponent,
-  ],
-  imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
-    FlexLayoutModule,
-    FormsModule,
-    FormlyMaterialModule,
-    FormlyModule.forRoot(FormlyConfig.config),
-    HttpClientModule,
-    InlineSVGModule,
-    MatButtonModule,
-    MatCardModule,
-    MatIconModule,
-    MatMenuModule,
-    MatTabsModule,
-    MatToolbarModule,
-    NgxPageScrollModule,
-    NgxPageScrollCoreModule.forRoot({easingLogic: easingFn}),
-    RouterModule.forRoot(routes),
-    MatTooltipModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule
-  ],
-  providers: [ApiService],
-  bootstrap: [AppComponent],
-  entryComponents: [
-    AboutUsComponent,
-    CaseStudiesComponent,
-    ContactUsComponent,
-    HeaderComponent,
-    LogoValuesComponent,
-    TeamComponent,
-    WelcomeComponent,
-  ]
+    declarations: [
+        AboutUsComponent,
+        AppComponent,
+        CaseStudiesComponent,
+        ContactUsComponent,
+        FooterComponent,
+        HeaderComponent,
+        LogoValuesComponent,
+        ScrollSpyDirective,
+        TeamComponent,
+        WelcomeComponent,
+        StyleGuideComponent,
+        HomeComponent,
+        TeamMemberComponent,
+        CaseStudyComponent,
+        CapabilityDetailsComponent,
+        BrandValueComponent,
+    ],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        FlexLayoutModule,
+        FormsModule,
+        FormlyMaterialModule,
+        FormlyModule.forRoot(FormlyConfig.config),
+        HttpClientModule,
+        InlineSVGModule,
+        MatButtonModule,
+        MatCardModule,
+        MatIconModule,
+        MatMenuModule,
+        MatTabsModule,
+        MatToolbarModule,
+        NgxPageScrollModule,
+        NgxPageScrollCoreModule.forRoot({ easingLogic: easingFn }),
+        RouterModule.forRoot(routes),
+        MatTooltipModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule
+    ],
+    providers: [ApiService],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }

src/app/contact-us/contact-us.component.ts

@@ -1,5 +1,5 @@
 import {Component, ElementRef, EventEmitter, HostListener, OnInit} from '@angular/core';
-import {FormGroup} from '@angular/forms';
+import {UntypedFormGroup} from '@angular/forms';
 import {FormlyFieldConfig} from '@ngx-formly/core';
 import {ApiService} from '../api.service';
 import {animations} from '../animation';
@@ -13,7 +13,7 @@ import {getScrollState} from '../util';
 })
 export class ContactUsComponent implements OnInit {
   state = 'hide';
-  form = new FormGroup({});
+  form = new UntypedFormGroup({});
   model: any = {};
   errorEmitter = new EventEmitter<string>();
   fields: FormlyFieldConfig[] = [

src/app/formly.validator.ts

@@ -1,9 +1,9 @@
-import { FormControl, ValidationErrors } from '@angular/forms';
+import { UntypedFormControl, ValidationErrors } from '@angular/forms';
 import {FormlyFieldConfig} from '@ngx-formly/core';
 
 export const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
-export function EmailValidator(control: FormControl): ValidationErrors {
+export function EmailValidator(control: UntypedFormControl): ValidationErrors {
   return EMAIL_REGEX.test(control.value) ? null : { 'email': true };
 }
 

tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],