feat: Upgrade to Angular14 (#4668)

* refactor: 🔥 removed angular-bootstrap-md dependancy

* chore: update tsconfig

* yeah

* ng14 upgrade

* refactor: migration changes

* fix: fixed CLI

* test: Fixed automation

src/Ombi/ClientApp/angular.json

@@ -19,7 +19,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "src/tsconfig.json",
             "assets": [
               "src/assets"
             ],
@@ -114,7 +114,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json"
+              "src/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -124,7 +124,6 @@
       }
     }
   },
-  "defaultProject": "ombi",
   "cli": {
     "analytics": false
   }

src/Ombi/ClientApp/package.json

@@ -4,23 +4,23 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 3578 --configuration hmr",
-    "build": "node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod",
+    "build": "node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build -c production",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.2.0",
+    "@angular/animations": "^14.0.0",
     "@angular/cdk": "^13.2.0",
-    "@angular/common": "^13.2.0",
+    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^13.2.0",
+    "@angular/compiler": "^14.0.0",
-    "@angular/core": "^13.2.0",
+    "@angular/core": "^14.0.0",
-    "@angular/forms": "^13.2.0",
+    "@angular/forms": "^14.0.0",
-    "@angular/localize": "^13.2.0",
+    "@angular/localize": "^14.0.0",
     "@angular/material": "^13.2.0",
-    "@angular/platform-browser": "^13.2.0",
+    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^13.2.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/platform-server": "^13.2.0",
+    "@angular/platform-server": "^14.0.0",
-    "@angular/router": "^13.2.0",
+    "@angular/router": "^14.0.0",
     "@angularclass/hmr": "^3.0.0",
     "@aspnet/signalr": "^1.1.0",
     "@auth0/angular-jwt": "^5.0.2",
@@ -34,7 +34,6 @@
     "@ngxs/store": "^3.7.3",
     "@types/jquery": "^3.5.13",
     "@yellowspot/ng-truncate": "^2.0.0",
-    "angular-bootstrap-md": "^7.5.4",
     "angular-router-loader": "^0.8.5",
     "angularx-qrcode": "^13.0.3",
     "bootstrap": "^4.2.1",
@@ -63,19 +62,19 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.0",
+    "@angular-devkit/build-angular": "^14.0.0",
-    "@angular/cli": "~13.2.0",
+    "@angular/cli": "^14.0.0",
-    "@angular/compiler-cli": "^13.2.0",
+    "@angular/compiler-cli": "^14.0.0",
-    "@angular/language-service": "^13.2.0",
+    "@angular/language-service": "^14.0.0",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^16.10.9",
     "codelyzer": "^6.0.1",
-    "typescript": "~4.5.5"
+    "typescript": "~4.7.3"
   },
   "optionalDependencies": {
     "protractor": "~5.4.0",
     "ts-node": "~5.0.1",
     "tslint": "^5.12.0"
   }
-}
+}

src/Ombi/ClientApp/src/app/app.module.ts

@@ -1,5 +1,4 @@
 import { APP_BASE_HREF, CommonModule, PlatformLocation } from "@angular/common";
-import { CardsFreeModule, MDBBootstrapModule, NavbarModule } from "angular-bootstrap-md";
 import { CustomPageService, ImageService, RequestService, SettingsService } from "./services";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from "@angular/common/http";
@@ -131,7 +130,6 @@ export function JwtTokenGetter() {
         MatSnackBarModule,
         DialogModule,
         MatButtonModule,
-        NavbarModule,
         MatCardModule,
         MatTooltipModule,
         MatMenuModule,
@@ -145,11 +143,9 @@ export function JwtTokenGetter() {
         ConfirmDialogModule,
         OverlayPanelModule,
         CommonModule,
-        CardsFreeModule,
         OverlayModule,
         MatCheckboxModule,
         MatProgressSpinnerModule,
-        MDBBootstrapModule.forRoot(),
         JwtModule.forRoot({
             config: {
                 tokenGetter: JwtTokenGetter,

src/Ombi/ClientApp/src/app/custompage/custompage.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, SecurityContext } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 import { AuthService } from "../auth/auth.service";
 import { CustomPageService, NotificationService } from "../services";
@@ -10,11 +10,11 @@ import { CustomPageService, NotificationService } from "../services";
 })
 export class CustomPageComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public isEditing: boolean;
     public isAdmin: boolean;
 
-    constructor(private auth: AuthService, private settings: CustomPageService, private fb: FormBuilder,
+    constructor(private auth: AuthService, private settings: CustomPageService, private fb: UntypedFormBuilder,
                 private notificationService: NotificationService, 
                 private sanitizer: DomSanitizer) {
     }

src/Ombi/ClientApp/src/app/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Inject } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
 
@@ -24,7 +24,7 @@ import { CustomizationFacade } from "../state/customization";
   styleUrls: ["./login.component.scss"],
 })
 export class LoginComponent implements OnDestroy, OnInit {
-  public form: FormGroup;
+  public form: UntypedFormGroup;
   public customizationSettings: ICustomizationSettings;
   public authenticationSettings: IAuthenticationSettings;
   public plexEnabled: boolean;
@@ -59,7 +59,7 @@ export class LoginComponent implements OnDestroy, OnInit {
     private authService: AuthService,
     private router: Router,
     private status: StatusService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private settingsService: SettingsService,
     private customziationFacade: CustomizationFacade,
     private images: ImageService,
@@ -132,7 +132,7 @@ export class LoginComponent implements OnDestroy, OnInit {
       .subscribe((x) => (this.errorValidation = x));
   }
 
-  public onSubmit(form: FormGroup) {
+  public onSubmit(form: UntypedFormGroup) {
     if (form.invalid) {
       this.notify.open(this.errorValidation, "OK", {
         duration: 300000,

src/Ombi/ClientApp/src/app/login/resetpassword.component.ts

@@ -1,6 +1,6 @@
 import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
 import { Component, OnInit, Inject } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 import { fadeInOutAnimation } from "../animations/fadeinout";
 
@@ -15,7 +15,7 @@ import { CustomizationFacade } from "../state/customization";
 })
 export class ResetPasswordComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public customizationSettings: ICustomizationSettings;
     public emailSettingsEnabled: boolean;
     public baseUrl: string;
@@ -23,7 +23,7 @@ export class ResetPasswordComponent implements OnInit {
     private href: string;
 
     constructor(private identityService: IdentityService, private notify: NotificationService,
-                private fb: FormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string,
+                private fb: UntypedFormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string,
                 private images: ImageService, private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade) {
                     this.href = href;
         this.form = this.fb.group({
@@ -43,7 +43,7 @@ export class ResetPasswordComponent implements OnInit {
         this.settingsService.getEmailSettingsEnabled().subscribe(x => this.emailSettingsEnabled = x);
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (this.emailSettingsEnabled) {
 
             if (form.invalid) {

src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts

@@ -1,6 +1,6 @@
 import { ActivatedRoute, Params } from "@angular/router";
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { IdentityService, ImageService } from "../services";
 
 import { CustomizationFacade } from "../state/customization";
@@ -17,13 +17,13 @@ import { Router } from "@angular/router";
 })
 export class TokenResetPasswordComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public customizationSettings: ICustomizationSettings;
     public background: any;
     public baseUrl: string;
 
     constructor(private identityService: IdentityService, private router: Router, private route: ActivatedRoute, private notify: NotificationService,
-                private fb: FormBuilder, private location: PlatformLocation, private images: ImageService,
+                private fb: UntypedFormBuilder, private location: PlatformLocation, private images: ImageService,
                 private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade,
                 ) {
 
@@ -49,7 +49,7 @@ export class TokenResetPasswordComponent implements OnInit {
         this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notify.error("Email address is required");
             return;

src/Ombi/ClientApp/src/app/media-details/components/shared/request-behalf/request-behalf.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { map, startWith } from "rxjs/operators";
-
-import { FormControl } from "@angular/forms";
-import { IUserDropdown } from "../../../../interfaces";
-import { IdentityService } from "../../../../services";
 import { MatDialogRef } from "@angular/material/dialog";
+import { IdentityService } from "../../../../services";
+import { IUserDropdown } from "../../../../interfaces";
+import { UntypedFormControl } from "@angular/forms";
 import { Observable } from "rxjs";
+import { map, startWith } from "rxjs/operators";
 
 @Component({
     selector: "request-behalf",
@@ -16,7 +15,7 @@ export class RequestBehalfComponent implements OnInit {
         public dialogRef: MatDialogRef<RequestBehalfComponent>,
         public identity: IdentityService) { }
 
-    public myControl = new FormControl();
+    public myControl = new UntypedFormControl();
     public options: IUserDropdown[];
     public filteredOptions: Observable<IUserDropdown[]>;
     public userId: string;

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts

@@ -8,7 +8,7 @@ import {
 
 import { empty} from "rxjs";
 import { Router } from "@angular/router";
-import { FormGroup, FormBuilder } from "@angular/forms";
+import { UntypedFormGroup, UntypedFormBuilder } from "@angular/forms";
 
 @Component({
   selector: "app-nav-search",
@@ -17,11 +17,11 @@ import { FormGroup, FormBuilder } from "@angular/forms";
 })
 export class NavSearchComponent implements OnInit {
 
-  public searchForm: FormGroup;
+  public searchForm: UntypedFormGroup;
 
   constructor(
     private router: Router,
-    private fb: FormBuilder
+    private fb: UntypedFormBuilder
   ) {}
 
   public async ngOnInit() {

src/Ombi/ClientApp/src/app/search/search.module.ts

@@ -1,27 +1,21 @@
-import { CommonModule } from "@angular/common";
+import { RouterModule, Routes } from "@angular/router";
-import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { RouterModule, Routes } from "@angular/router";
 
-
-import { MovieSearchComponent } from "./moviesearch.component";
-import { MovieSearchGridComponent } from "./moviesearchgrid.component";
 import { AlbumSearchComponent } from "./music/albumsearch.component";
 import { ArtistSearchComponent } from "./music/artistsearch.component";
-import { MusicSearchComponent } from "./music/musicsearch.component";
-import { SearchComponent } from "./search.component";
-import { SeriesInformationComponent } from "./seriesinformation.component";
-import { TvSearchComponent } from "./tvsearch.component";
-
-import { CardsFreeModule } from "angular-bootstrap-md";
-
-import { RequestService } from "../services";
-import { SearchService } from "../services";
-
 import { AuthGuard } from "../auth/auth.guard";
-
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { MovieSearchComponent } from "./moviesearch.component";
+import { MovieSearchGridComponent } from "./moviesearchgrid.component";
+import { MusicSearchComponent } from "./music/musicsearch.component";
+import { NgModule } from "@angular/core";
 import { RemainingRequestsComponent } from "../requests/remainingrequests.component";
+import { RequestService } from "../services";
+import { SearchComponent } from "./search.component";
+import { SearchService } from "../services";
+import { SeriesInformationComponent } from "./seriesinformation.component";
 import { SharedModule } from "../shared/shared.module";
+import { TvSearchComponent } from "./tvsearch.component";
 
 const routes: Routes = [
     { path: "", component: SearchComponent, canActivate: [AuthGuard] },
@@ -36,7 +30,6 @@ const routes: Routes = [
         SharedModule,
         SidebarModule,
         TooltipModule,
-        CardsFreeModule,
     ],
     declarations: [
         SearchComponent,

src/Ombi/ClientApp/src/app/services/helpers/validation.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { FormGroup, ValidatorFn, Validators } from "@angular/forms";
+import { UntypedFormGroup, ValidatorFn, Validators } from "@angular/forms";
 
 @Injectable()
 export class ValidationService {
@@ -9,7 +9,7 @@ export class ValidationService {
      * @param form
      * @param name
      */
-    public disableValidation(form: FormGroup, name: string) {
+    public disableValidation(form: UntypedFormGroup, name: string) {
         form.controls[name].clearValidators();
         form.controls[name].updateValueAndValidity();
     }
@@ -19,8 +19,8 @@ export class ValidationService {
      * @param form
      * @param name
      */
-    public enableValidation(form: FormGroup, name: string): void;
+    public enableValidation(form: UntypedFormGroup, name: string): void;
-    public enableValidation(form: FormGroup, name: string, validators?: ValidatorFn[]) {
+    public enableValidation(form: UntypedFormGroup, name: string, validators?: ValidatorFn[]) {
         if (validators) {
             // If we provide some use them
             form.controls[name].setValidators(validators);

src/Ombi/ClientApp/src/app/settings/authentication/authentication.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { NotificationService } from "../../services";
 import { SettingsService } from "../../services";
@@ -10,11 +10,11 @@ import { SettingsService } from "../../services";
 })
 export class AuthenticationComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
     public ngOnInit() {
         this.settingsService.getAuthentication().subscribe(x => {
@@ -42,7 +42,7 @@ export class AuthenticationComponent implements OnInit {
 
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { CouchPotatoService, NotificationService, SettingsService, TesterService } from "../../services";
 
@@ -11,13 +11,13 @@ import { ICouchPotatoProfiles } from "../../interfaces";
 })
 export class CouchPotatoComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public profiles: ICouchPotatoProfiles;
 
     public profilesRunning: boolean;
 
     constructor(private readonly settingsService: SettingsService,
-                private readonly fb: FormBuilder,
+                private readonly fb: UntypedFormBuilder,
                 private readonly notificationService: NotificationService,
                 private readonly couchPotatoService: CouchPotatoService,
                 private readonly testerService: TesterService) { }
@@ -42,7 +42,7 @@ export class CouchPotatoComponent implements OnInit {
         });
     }
 
-    public getProfiles(form: FormGroup) {
+    public getProfiles(form: UntypedFormGroup) {
         this.profilesRunning = true;
         this.couchPotatoService.getProfiles(form.value).subscribe(x => {
             this.profiles = x;
@@ -50,7 +50,7 @@ export class CouchPotatoComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -67,7 +67,7 @@ export class CouchPotatoComponent implements OnInit {
         });
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -82,10 +82,10 @@ export class CouchPotatoComponent implements OnInit {
         });
     }
 
-    public requestToken(form: FormGroup) {
+    public requestToken(form: UntypedFormGroup) {
         this.couchPotatoService.getApiKey(form.value).subscribe(x => {
             if (x.success === true) {
-                (<FormControl>this.form.controls.apiKey).setValue(x.api_key);
+                (<UntypedFormControl>this.form.controls.apiKey).setValue(x.api_key);
                 this.notificationService.success("Successfully grabbed the Api Key");
             } else {
                 this.notificationService.error("Could not get the Api Key");

src/Ombi/ClientApp/src/app/settings/dognzb/dognzb.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { NotificationService, SettingsService } from "../../services";
 
@@ -9,12 +9,12 @@ import { NotificationService, SettingsService } from "../../services";
 })
 export class DogNzbComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     public profilesRunning: boolean;
 
     constructor(private readonly settingsService: SettingsService,
-                private readonly fb: FormBuilder,
+                private readonly fb: UntypedFormBuilder,
                 private readonly notificationService: NotificationService) { }
 
     public ngOnInit() {
@@ -28,7 +28,7 @@ export class DogNzbComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/emby/emby.component.ts

@@ -2,7 +2,7 @@
 import { EmbyService, JobService, NotificationService, SettingsService, TesterService } from "../../services";
 import { IEmbyLibrariesSettings, IEmbyServer, IEmbySettings } from "../../interfaces";
 
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import { MatTabChangeEvent } from "@angular/material/tabs";
 
 @Component({
@@ -13,7 +13,7 @@ export class EmbyComponent implements OnInit {
 
     public settings: IEmbySettings;
     public hasDiscoveredOrDirty: boolean;
-    selected = new FormControl(0);
+    selected = new UntypedFormControl(0);
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,

src/Ombi/ClientApp/src/app/settings/issues/issues.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { IIssueCategory } from "../../interfaces";
 import { IssuesService, NotificationService, SettingsService } from "../../services";
@@ -12,11 +12,11 @@ export class IssuesComponent implements OnInit {
 
     public categories: IIssueCategory[];
     public categoryToAdd: IIssueCategory = {id: 0, value: ""};
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private issuesService: IssuesService,
                 private settingsService: SettingsService,
-                private readonly fb: FormBuilder,
+                private readonly fb: UntypedFormBuilder,
                 private notificationService: NotificationService) {  }
 
     public ngOnInit() {
@@ -48,7 +48,7 @@ export class IssuesComponent implements OnInit {
         });
     }
     
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/jellyfin/jellyfin.component.ts

@@ -2,7 +2,7 @@
 import { IEmbyServer, IJellyfinLibrariesSettings, IJellyfinServer, IJellyfinSettings } from "../../interfaces";
 import { JellyfinService, JobService, NotificationService, SettingsService, TesterService } from "../../services";
 
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import { MatTabChangeEvent } from "@angular/material/tabs";
 
 @Component({
@@ -13,7 +13,7 @@ export class JellyfinComponent implements OnInit {
 
     public settings: IJellyfinSettings;
     public hasDiscoveredOrDirty: boolean;
-    selected = new FormControl(0);
+    selected = new UntypedFormControl(0);
 
 
     constructor(private settingsService: SettingsService,

src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { JobService, NotificationService, SettingsService } from "../../services";
 
 @Component({
@@ -8,12 +8,12 @@ import { JobService, NotificationService, SettingsService } from "../../services
 })
 export class JobsComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     public profilesRunning: boolean;
 
     constructor(private readonly settingsService: SettingsService,
-                private readonly fb: FormBuilder,
+                private readonly fb: UntypedFormBuilder,
                 private readonly notificationService: NotificationService,
                 private readonly jobsService: JobService) { }
 
@@ -52,7 +52,7 @@ export class JobsComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { ILidarrSettings, IMinimumAvailability, IProfiles, IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
 import { LidarrService, TesterService } from "../../services";
@@ -20,12 +20,12 @@ export class LidarrComponent implements OnInit {
     public rootFoldersRunning: boolean;
     public metadataRunning: boolean;
     public advanced = false;
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private lidarrService: LidarrService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -67,7 +67,7 @@ export class LidarrComponent implements OnInit {
             });
     }
 
-    public getProfiles(form: FormGroup) {
+    public getProfiles(form: UntypedFormGroup) {
         this.profilesRunning = true;
         this.lidarrService.getQualityProfiles(form.value).subscribe(x => {
             this.qualities = x;
@@ -78,7 +78,7 @@ export class LidarrComponent implements OnInit {
         });
     }
 
-    public getRootFolders(form: FormGroup) {
+    public getRootFolders(form: UntypedFormGroup) {
         this.rootFoldersRunning = true;
         this.lidarrService.getRootFolders(form.value).subscribe(x => {
             this.rootFolders = x;
@@ -89,7 +89,7 @@ export class LidarrComponent implements OnInit {
         });
     }
 
-    public getMetadataProfiles(form: FormGroup) {
+    public getMetadataProfiles(form: UntypedFormGroup) {
         this.metadataRunning = true;
         this.lidarrService.getMetadataProfiles(form.value).subscribe(x => {
             this.metadataProfiles = x;
@@ -100,7 +100,7 @@ export class LidarrComponent implements OnInit {
         });
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -117,7 +117,7 @@ export class LidarrComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/cloudmobile.coponent.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { IMobileNotifcationSettings, IMobileUsersViewModel, INotificationTemplates, NotificationType, ICloudMobileDevices, ICloudMobileModel } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -17,7 +17,7 @@ export class CloudMobileComponent implements OnInit {
 
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public devices: MatTableDataSource<ICloudMobileModel>;
     public selection = new SelectionModel<ICloudMobileModel>(true, []);
     displayedColumns: string[] = ['select', 'username'];
@@ -25,7 +25,7 @@ export class CloudMobileComponent implements OnInit {
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private mobileService: CloudMobileService) { }
 
     public async ngOnInit() {
@@ -42,7 +42,7 @@ export class CloudMobileComponent implements OnInit {
             }
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -61,7 +61,7 @@ export class CloudMobileComponent implements OnInit {
 
     }
 
-    public async sendMessage(form: FormGroup) {
+    public async sendMessage(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/discord.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IDiscordNotifcationSettings, INotificationTemplates, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -14,11 +14,11 @@ export class DiscordComponent implements OnInit {
 
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -36,7 +36,7 @@ export class DiscordComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -55,7 +55,7 @@ export class DiscordComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/emailnotification.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IEmailNotificationSettings, INotificationTemplates, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -14,11 +14,11 @@ import { SettingsService } from "../../services";
 export class EmailNotificationComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public emailForm: FormGroup;
+    public emailForm: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private validationService: ValidationService,
                 private testerService: TesterService) { }
 
@@ -48,7 +48,7 @@ export class EmailNotificationComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -67,7 +67,7 @@ export class EmailNotificationComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IGotifyNotificationSettings, INotificationTemplates, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,11 +13,11 @@ import { SettingsService } from "../../services";
 export class GotifyComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -33,7 +33,7 @@ export class GotifyComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -52,7 +52,7 @@ export class GotifyComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IMattermostNotifcationSettings, INotificationTemplates, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -14,11 +14,11 @@ export class MattermostComponent implements OnInit {
 
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -36,7 +36,7 @@ export class MattermostComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -55,7 +55,7 @@ export class MattermostComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { IMobileNotifcationSettings, IMobileUsersViewModel, INotificationTemplates, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -14,13 +14,13 @@ export class MobileComponent implements OnInit {
 
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public userList: IMobileUsersViewModel[];
     public testUserId: string;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService,
                 private mobileService: MobileService) { }
 
@@ -42,7 +42,7 @@ export class MobileComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -61,7 +61,7 @@ export class MobileComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, IPushbulletNotificationSettings, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,11 +13,11 @@ import { SettingsService } from "../../services";
 export class PushbulletComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -32,7 +32,7 @@ export class PushbulletComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -51,7 +51,7 @@ export class PushbulletComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, IPushoverNotificationSettings, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,11 +13,11 @@ import { SettingsService } from "../../services";
 export class PushoverComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -34,7 +34,7 @@ export class PushoverComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -53,7 +53,7 @@ export class PushoverComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/slack.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, ISlackNotificationSettings, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,11 +13,11 @@ import { SettingsService } from "../../services";
 export class SlackComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -36,7 +36,7 @@ export class SlackComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -60,7 +60,7 @@ export class SlackComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, ITelegramNotifcationSettings, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -14,11 +14,11 @@ export class TelegramComponent implements OnInit {
 
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -35,7 +35,7 @@ export class TelegramComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -54,7 +54,7 @@ export class TelegramComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/twilio/twilio.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, ITwilioSettings, NotificationType } from "../../../interfaces";
 import { TesterService } from "../../../services";
@@ -12,11 +12,11 @@ import { SettingsService } from "../../../services";
 export class TwilioComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -34,7 +34,7 @@ export class TwilioComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/twilio/whatsapp.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { FormGroup } from "@angular/forms";
+import { UntypedFormGroup } from "@angular/forms";
 import { TesterService, NotificationService } from "../../../services";
 import { INotificationTemplates, NotificationType } from "../../../interfaces";
 
@@ -13,13 +13,13 @@ export class WhatsAppComponent {
 
     public NotificationType = NotificationType;
     @Input() public templates: INotificationTemplates[];
-    @Input() public form: FormGroup;
+    @Input() public form: UntypedFormGroup;
 
     constructor(private testerService: TesterService,
                 private notificationService: NotificationService) { }
 
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { INotificationTemplates, IWebhookNotificationSettings, NotificationType } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,11 +13,11 @@ import { SettingsService } from "../../services";
 export class WebhookComponent implements OnInit {
     public NotificationType = NotificationType;
     public templates: INotificationTemplates[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder,
+                private fb: UntypedFormBuilder,
                 private testerService: TesterService) { }
 
     public ngOnInit() {
@@ -30,7 +30,7 @@ export class WebhookComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -48,7 +48,7 @@ export class WebhookComponent implements OnInit {
 
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { Branch, ILanguageRefine, IOmbiSettings } from "../../interfaces";
 import { NotificationService } from "../../services";
@@ -13,13 +13,13 @@ import languageData from "./../../../other/iso-lang.json";
 })
 export class OmbiComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public langauges: ILanguageRefine[];
     public Branch = Branch;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
     public ngOnInit() {
         this.settingsService.getOmbi().subscribe(x => {
@@ -45,7 +45,7 @@ export class OmbiComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/plex/plex.component.ts

@@ -5,7 +5,7 @@ import { takeUntil } from "rxjs/operators";
 import { IPlexLibrariesSettings, IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
 import { JobService, NotificationService, PlexService, SettingsService, TesterService } from "../../services";
 import { MatTabChangeEvent, MatTabGroup } from "@angular/material/tabs";
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 
 @Component({
     templateUrl: "./plex.component.html",
@@ -17,7 +17,7 @@ export class PlexComponent implements OnInit, OnDestroy {
     public username: string;
     public password: string;
     public serversButton = false;
-    selected = new FormControl(0);
+    selected = new UntypedFormControl(0);
     @ViewChild("tabGroup", {static: false}) public tagGroup: MatTabGroup;
 
     public advanced = false;

src/Ombi/ClientApp/src/app/settings/radarr/components/radarr-form.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
-import { ControlContainer, FormGroup, Validators } from "@angular/forms";
+import { ControlContainer, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IMinimumAvailability, IRadarrProfile, IRadarrRootFolder, IRadarrSettings } from "../../../interfaces";
 import { TesterService, NotificationService, RadarrService } from "../../../services";
@@ -18,7 +18,7 @@ export class RadarrFormComponent implements OnInit {
     public minimumAvailabilityOptions: IMinimumAvailability[];
     public profilesRunning: boolean;
     public rootFoldersRunning: boolean;
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private radarrService: RadarrService,
                 private notificationService: NotificationService,
@@ -27,7 +27,7 @@ export class RadarrFormComponent implements OnInit {
                 }
 
     public ngOnInit() {
-        this.form = <FormGroup>this.controlContainer.control;
+        this.form = <UntypedFormGroup>this.controlContainer.control;
 
         this.qualities = [];
         this.qualities.push({ name: "Please Select", id: -1 });
@@ -59,7 +59,7 @@ export class RadarrFormComponent implements OnInit {
         this.form.controls.minimumAvailability.setValidators(enabled ? [Validators.required] : null);
     }
 
-    public getProfiles(form: FormGroup) {
+    public getProfiles(form: UntypedFormGroup) {
          this.profilesRunning = true;
          this.radarrService.getQualityProfiles(form.value).subscribe(x => {
              this.qualities = x;
@@ -70,7 +70,7 @@ export class RadarrFormComponent implements OnInit {
          });
     }
 
-    public getRootFolders(form: FormGroup) {
+    public getRootFolders(form: UntypedFormGroup) {
          this.rootFoldersRunning = true;
          this.radarrService.getRootFolders(form.value).subscribe(x => {
              this.rootFolders = x;
@@ -81,7 +81,7 @@ export class RadarrFormComponent implements OnInit {
          });
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, QueryList, ViewChild, ViewChildren } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { IMinimumAvailability, IRadarrCombined, IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
 import { NotificationService, SettingsService } from "../../services";
@@ -17,7 +17,7 @@ export class RadarrComponent implements OnInit {
     public minimumAvailabilityOptions: IMinimumAvailability[];
     public profilesRunning: boolean;
     public rootFoldersRunning: boolean;
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public is4kEnabled: boolean = false;
 
     @ViewChildren('4kForm') public form4k: QueryList<RadarrFormComponent>;
@@ -26,7 +26,7 @@ export class RadarrComponent implements OnInit {
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
                 private featureFacade: FeaturesFacade,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
 
     public ngOnInit() {
@@ -74,13 +74,13 @@ export class RadarrComponent implements OnInit {
     }
 
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        const radarrForm = form.controls.radarr as FormGroup;
+        const radarrForm = form.controls.radarr as UntypedFormGroup;
-        const radarr4KForm = form.controls.radarr4K as FormGroup;
+        const radarr4KForm = form.controls.radarr4K as UntypedFormGroup;
 
         if (radarrForm.controls.enabled.value && (radarrForm.controls.defaultQualityProfile.value === -1 || radarrForm.controls.defaultRootPath.value === "Please Select")) {
             this.notificationService.error("Please check your entered values for Radarr");

src/Ombi/ClientApp/src/app/settings/sickrage/sickrage.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { IDropDownModel, ISickRageSettings } from "../../interfaces";
 import { TesterService } from "../../services";
@@ -13,12 +13,12 @@ import { SettingsService } from "../../services";
 export class SickRageComponent implements OnInit {
 
     public qualities: IDropDownModel[];
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
                 private testerService: TesterService,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
     public ngOnInit() {
         this.settingsService.getSickRageSettings()
@@ -36,7 +36,7 @@ export class SickRageComponent implements OnInit {
             });
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -51,7 +51,7 @@ export class SickRageComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, FormControl, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { ILanguageProfiles, ISonarrProfile, ISonarrRootFolder } from "../../interfaces";
 
@@ -27,7 +27,7 @@ export class SonarrComponent implements OnInit {
     public profilesRunning: boolean;
     public rootFoldersRunning: boolean;
     public langRunning: boolean;
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public advanced = false;
     formErrors: any;
 
@@ -35,7 +35,7 @@ export class SonarrComponent implements OnInit {
                 private sonarrService: SonarrService,
                 private notificationService: NotificationService,
                 private testerService: TesterService,
-                private fb: FormBuilder){}
+                private fb: UntypedFormBuilder){}
 
     onFormValuesChanged()
         {
@@ -115,7 +115,7 @@ export class SonarrComponent implements OnInit {
         this.qualities.push({ name: "Please Select", id: -1 });
     }
 
-    public getProfiles(form: FormGroup) {
+    public getProfiles(form: UntypedFormGroup) {
         this.profilesRunning = true;
         this.sonarrService.getQualityProfiles(form.value)
             .subscribe(x => {
@@ -127,7 +127,7 @@ export class SonarrComponent implements OnInit {
             });
     }
 
-    public getRootFolders(form: FormGroup) {
+    public getRootFolders(form: UntypedFormGroup) {
         this.rootFoldersRunning = true;
         this.sonarrService.getRootFolders(form.value)
             .subscribe(x => {
@@ -140,7 +140,7 @@ export class SonarrComponent implements OnInit {
             });
     }
 
-    public getLanguageProfiles(form: FormGroup) {
+    public getLanguageProfiles(form: UntypedFormGroup) {
         this.langRunning = true;
         this.sonarrService.getV3LanguageProfiles(form.value)
             .subscribe(x => {
@@ -155,7 +155,7 @@ export class SonarrComponent implements OnInit {
             }
     }
 
-    public test(form: FormGroup) {
+    public test(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;
@@ -172,7 +172,7 @@ export class SonarrComponent implements OnInit {
         });
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.ts

@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from "@angular/cdk/keycodes";
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 import { ILanguage, IMovieDbKeyword, ITheMovieDbSettings } from "../../interfaces";
 import { debounceTime, switchMap } from "rxjs/operators";
 
@@ -26,7 +26,7 @@ export class TheMovieDbComponent implements OnInit {
     public excludedKeywords: IKeywordTag[];
     public excludedMovieGenres: IKeywordTag[];
     public excludedTvGenres: IKeywordTag[];
-    public tagForm: FormGroup;
+    public tagForm: UntypedFormGroup;
     public languages: ILanguage[];
     public filteredTags: IMovieDbKeyword[];
     public filteredMovieGenres: IMovieDbKeyword[];
@@ -37,7 +37,7 @@ export class TheMovieDbComponent implements OnInit {
                 private notificationService: NotificationService,
                 private tmdbService: TheMovieDbService,
                 private searchService: SearchV2Service,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
     public ngOnInit() {
         this.settingsService.getTheMovieDbSettings().subscribe(settings => {

src/Ombi/ClientApp/src/app/settings/update/update.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 
 import { NotificationService } from "../../services";
 import { JobService, SettingsService } from "../../services";
@@ -10,7 +10,7 @@ import { JobService, SettingsService } from "../../services";
 })
 export class UpdateComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
     public updateAvailable = false;
     public enableUpdateButton = false;
     public isWindows = false;
@@ -22,7 +22,7 @@ export class UpdateComponent implements OnInit {
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
                 private updateService: JobService,
-                private fb: FormBuilder) { }
+                private fb: UntypedFormBuilder) { }
 
     public ngOnInit() {
         this.settingsService.getUpdateSettings()
@@ -59,7 +59,7 @@ export class UpdateComponent implements OnInit {
         this.notificationService.success("We triggered the update job");
     }
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/settings/vote/vote.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { NotificationService, SettingsService } from "../../services";
 
@@ -9,10 +9,10 @@ import { NotificationService, SettingsService } from "../../services";
 })
 export class VoteComponent implements OnInit {
 
-    public form: FormGroup;
+    public form: UntypedFormGroup;
 
     constructor(private settingsService: SettingsService,
-                private readonly fb: FormBuilder,
+                private readonly fb: UntypedFormBuilder,
                 private notificationService: NotificationService) {  }
 
     public ngOnInit() {
@@ -26,7 +26,7 @@ export class VoteComponent implements OnInit {
         });
     }    
 
-    public onSubmit(form: FormGroup) {
+    public onSubmit(form: UntypedFormGroup) {
         if (form.invalid) {
             this.notificationService.error("Please check your entered values");
             return;

src/Ombi/ClientApp/src/app/shared/admin-request-dialog/admin-request-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { firstValueFrom, Observable } from "rxjs";
 import { startWith, map } from "rxjs/operators";
@@ -25,10 +25,10 @@ export class AdminRequestDialogComponent implements OnInit {
     private sonarrService: SonarrService,
     private settingsService: SettingsService,
     private radarrService: RadarrService,
-    private fb: FormBuilder
+    private fb: UntypedFormBuilder
   ) {}
 
-  public form: FormGroup;
+  public form: UntypedFormGroup;
   public RequestType = RequestType;
 
   public options: IUserDropdown[];

src/Ombi/ClientApp/src/app/shared/advanced-search-dialog/advanced-search-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { RequestType } from "../../interfaces";
 import { SearchV2Service } from "../../services";
@@ -13,12 +13,12 @@ import { AdvancedSearchDialogDataService } from "./advanced-search-dialog-data.s
 export class AdvancedSearchDialogComponent implements OnInit {
   constructor(
     public dialogRef: MatDialogRef<AdvancedSearchDialogComponent, boolean>,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private searchService: SearchV2Service,
     private advancedSearchDialogService: AdvancedSearchDialogDataService
   ) {}
 
-  public form: FormGroup;
+  public form: UntypedFormGroup;
 
   public async ngOnInit() {
 

src/Ombi/ClientApp/src/app/shared/components/genre-select/genre-select.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from "rxjs/operators";
 
 import { IMovieDbKeyword } from "../../../interfaces";
@@ -16,7 +16,7 @@ export class GenreSelectComponent {
     private searchService: SearchV2Service
   ) {}
 
-  @Input() public form: FormGroup;
+  @Input() public form: UntypedFormGroup;
 
   private _mediaType: string;
   @Input() set mediaType(type: string) {
@@ -33,7 +33,7 @@ export class GenreSelectComponent {
     return this._mediaType;
   }
   public genres: IMovieDbKeyword[] = [];
-  public control = new FormControl();
+  public control = new UntypedFormControl();
   public filteredTags: IMovieDbKeyword[];
   public filteredKeywords: Observable<IMovieDbKeyword[]>;
 

src/Ombi/ClientApp/src/app/shared/components/keyword-search/keyword-search.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 import { debounceTime, distinctUntilChanged, startWith, switchMap } from "rxjs/operators";
 
 import { IMovieDbKeyword } from "../../../interfaces";
@@ -16,8 +16,8 @@ export class KeywordSearchComponent implements OnInit  {
     private tmdbService: TheMovieDbService
   ) {}
 
-  @Input() public form: FormGroup;
+  @Input() public form: UntypedFormGroup;
-  public control = new FormControl();
+  public control = new UntypedFormControl();
   public filteredTags: IMovieDbKeyword[];
   public filteredKeywords: Observable<IMovieDbKeyword[]>;
 

src/Ombi/ClientApp/src/app/shared/components/watch-providers-select/watch-providers-select.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 import { IMovieDbKeyword, IWatchProvidersResults } from "../../../interfaces";
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from "rxjs/operators";
 
@@ -30,10 +30,10 @@ export class WatchProvidersSelectComponent {
   get mediaType(): string {
     return this._mediaType;
   }
-  @Input() public form: FormGroup;
+  @Input() public form: UntypedFormGroup;
 
   public watchProviders: IWatchProvidersResults[] = [];
-  public control = new FormControl();
+  public control = new UntypedFormControl();
   public filteredTags: IWatchProvidersResults[];
   public filteredList: Observable<IWatchProvidersResults[]>;
 

src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts

@@ -5,7 +5,7 @@ import { AvailableLanguages } from "./user-preference.constants";
 import { IdentityService, NotificationService, ValidationService } from "../../../services";
 import { IUser, UserType } from "../../../interfaces";
 import { Md5 } from "ts-md5";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { APP_BASE_HREF } from "@angular/common";
 import { CustomizationFacade } from "../../../state/customization";
 
@@ -26,7 +26,7 @@ export class UserPreferenceComponent implements OnInit {
     public UserType = UserType;
     public baseUrl: string;
 
-    public passwordForm: FormGroup;
+    public passwordForm: UntypedFormGroup;
 
     private user: IUser;
     private applicationUrl: string = this.customizationFacade.appUrl();
@@ -36,7 +36,7 @@ export class UserPreferenceComponent implements OnInit {
         private readonly translate: TranslateService,
         private readonly notification: NotificationService,
         private readonly identityService: IdentityService,
-        private readonly fb: FormBuilder,
+        private readonly fb: UntypedFormBuilder,
         private readonly validationService: ValidationService,
         private readonly customizationFacade: CustomizationFacade,
         @Inject(APP_BASE_HREF) public internalBaseUrl: string) { }

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html

@@ -1,6 +1,6 @@
 <div class="wizard-background">
   <div class="container wizard-inner">
-      <mat-horizontal-stepper linear #stepper>
+      <mat-stepper linear #stepper>
         <mat-step >
           <form >
             <ng-template matStepLabel>Welcome</ng-template>
@@ -53,7 +53,7 @@
           </form>
         </mat-step>
         <mat-step [optional]="true">
-          <form >
+          <form>
             <ng-template matStepLabel>Ombi config</ng-template>
             <wizard-ombi [config]="config"></wizard-ombi>
             <div>
@@ -81,6 +81,6 @@
             <button mat-button (click)="stepper.reset()" class="mat-raised-button mat-error left">Reset</button>
           </div>
         </mat-step>
-      </mat-horizontal-stepper>
+      </mat-stepper>
   </div>
 </div>

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.ts

@@ -1,10 +1,10 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { IdentityService, NotificationService, SettingsService } from "../../services";
 
 import { CustomizationFacade } from "../../state/customization/customization.facade";
 import { ICreateWizardUser } from "../../interfaces";
 import { IOmbiConfigModel } from "../models/OmbiConfigModel";
-import { MatHorizontalStepper } from'@angular/material/stepper';
+import { MatStepper } from'@angular/material/stepper';
 import { Router } from "@angular/router";
 import { WizardService } from "../services/wizard.service";
 
@@ -14,7 +14,7 @@ import { WizardService } from "../services/wizard.service";
 })
 export class WelcomeComponent implements OnInit {
 
-    @ViewChild('stepper', {static: false}) public stepper: MatHorizontalStepper;
+    @ViewChild('stepper', {static: false}) public stepper: MatStepper;
     public localUser: ICreateWizardUser;
     public config: IOmbiConfigModel;
 

src/Ombi/ClientApp/src/tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "es2020",
     "types": ["node"],
     "resolveJsonModule":true,
     "allowSyntheticDefaultImports":true,

src/Ombi/ClientApp/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "esnext",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2020",
+    "types": ["node"],
+    "resolveJsonModule":true,
+    "allowSyntheticDefaultImports":true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+,
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tests/cypress/integration/page-objects/shared/DiscoverCard.ts

@@ -24,7 +24,7 @@ export class DiscoverCard {
     }
 
     get requestType(): Cypress.Chainable<any> {
-      return cy.get(`#type${this.id}`);
+      return cy.get(`#type${this.id}-${this.movie ? 'movie': 'tvShow'}`);
     }
 
     get statusClass(): Cypress.Chainable<any> {

tests/cypress/tests/search/search.spec.ts

@@ -3,7 +3,7 @@ import { searchPage as Page } from "@/integration/page-objects";
 describe("Search Tests", () => {
   beforeEach(() => {
     cy.login();
-    cy.intercept("POST", "v2/search/multi/").as("searchResponse");
+    cy.intercept("POST", "api/v2/search/multi/*").as("searchResponse");
   });
 
   it("Single result when TV Search Only", () => {