feat: Angular 15 and Dependency upgrades (#4818)

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
 
       - name: NodeModules Cache
         uses: actions/cache@v2

.github/workflows/cypress.yml

@@ -22,7 +22,7 @@ jobs:
         dotnet-version: 6.0.x
     - uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '18'
 
     - uses: actions/cache@v2
       with:
@@ -43,6 +43,9 @@ jobs:
     - name: Run Docker Image
       run: nohup docker run --rm -p 5000:5000 ombi &
 
+    # - name: Run Wiremock Plex
+    #   run: nohup docker run -it --rm -p 8080:8080 --name wiremock wiremock/wiremock:2.35.0
+
     - name: Sleep for server to start
       run: sleep 20
 

.github/workflows/pr.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
 
       - name: NodeModules Cache
         uses: actions/cache@v2

.gitignore

@@ -252,3 +252,4 @@ _Pvt_Extensions
 /src/Ombi/healthchecksdb
 /src/Ombi/ClientApp/package-lock.json
 /src/Ombi.Core/Properties/launchSettings.json
+.yarn

src/Ombi/.gitignore

@@ -7,4 +7,5 @@ wwwroot/dist
 /connect.lock
 /coverage/*
 /Logs/**
-**.db
+**.db
+.yarn

src/Ombi/ClientApp/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/Ombi/ClientApp/angular.json

@@ -8,23 +8,25 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
-            "progress": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "src/tsconfig.json",
             "assets": [
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles/_imports.scss",
               "node_modules/bootstrap/scss/bootstrap.scss",
               "node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
@@ -33,15 +35,10 @@
               "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
               "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
               "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeicons/primeicons.css"
-              "node_modules/@fullcalendar/core/main.min.css",
-              "node_modules/@fullcalendar/daygrid/main.min.css"
             ],
             "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/jquery/dist/jquery.min.js"
-              "node_modules/chart.js/dist/Chart.js",
-              "./node_modules/@fullcalendar/core/main.js",
-              "./node_modules/@fullcalendar/interaction/main.js"
             ]
           },
           "configurations": {
@@ -58,14 +55,7 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "outputHashing": "all"
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
             },
             "hmr": {
               "budgets": [

src/Ombi/ClientApp/package.json

@@ -13,40 +13,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.0.0",
+    "@angular/animations": "^15.0.1",
-    "@angular/cdk": "^13.2.0",
+    "@angular/cdk": "^14.2.7",
-    "@angular/common": "^14.0.0",
+    "@angular/common": "^15.0.1",
-    "@angular/compiler": "^14.0.0",
+    "@angular/compiler": "^15.0.1",
-    "@angular/core": "^14.0.0",
+    "@angular/core": "^15.0.1",
-    "@angular/forms": "^14.0.0",
+    "@angular/forms": "^15.0.1",
-    "@angular/localize": "^14.0.0",
+    "@angular/localize": "^15.0.1",
-    "@angular/material": "^13.2.0",
+    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser": "^15.0.1",
-    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.1",
-    "@angular/platform-server": "^14.0.0",
+    "@angular/platform-server": "^15.0.1",
-    "@angular/router": "^14.0.0",
+    "@angular/router": "^15.0.1",
     "@angularclass/hmr": "^3.0.0",
     "@auth0/angular-jwt": "^5.0.2",
     "@fortawesome/fontawesome-free": "^6.0.0",
-    "@fullcalendar/core": "^4.2.0",
-    "@fullcalendar/daygrid": "^4.4.0",
-    "@fullcalendar/interaction": "^4.2.0",
     "@microsoft/signalr": "^6.0.7",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@ngxs/devtools-plugin": "^3.7.3",
     "@ngxs/store": "^3.7.3",
-    "@types/jquery": "^3.5.13",
+    "@types/jquery": "^3.5.14",
     "@yellowspot/ng-truncate": "^2.0.0",
     "angular-router-loader": "^0.8.5",
-    "angularx-qrcode": "^13.0.3",
+    "angularx-qrcode": "^15.0.0",
     "bootstrap": "^4.2.1",
-    "chart.js": "2.9.4",
     "core-js": "^2.5.4",
-    "eventemitter2": "^5.0.1",
+    "jquery": "3.6.1",
-    "fullcalendar": "^4.0.0-alpha.4",
-    "immer": "^9.0.6",
-    "jquery": "3.3.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "ng2-cookies": "^1.0.12",
@@ -55,42 +48,22 @@
     "ngx-moment": "^3.0.1",
     "ngx-order-pipe": "^2.2.0",
     "popper.js": "^1.14.3",
-    "primeicons": "^5.0.0",
+    "primeicons": "^6.0.1",
-    "primeng": "^13.2.0",
+    "primeng": "^15.0.0-rc.1",
-    "protractor": "~5.4.0",
     "rxjs": "^7.5.4",
-    "sass-recursive-map-merge": "^1.0.1",
-    "store": "^2.0.12",
     "ts-md5": "^1.2.7",
-    "ts-node": "~5.0.1",
-    "tslib": "^1.10.0",
-    "tslint": "^5.12.0",
     "tslint-angular": "^1.1.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular-devkit/build-angular": "^15.0.2",
-    "@angular/cli": "^14.0.0",
+    "@angular/cli": "^15.0.2",
-    "@angular/compiler-cli": "^14.0.0",
+    "@angular/compiler-cli": "^15.0.1",
-    "@angular/language-service": "^14.0.0",
     "@babel/core": "^7.18.9",
     "@compodoc/compodoc": "^1.1.19",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
     "@storybook/angular": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/preset-scss": "^1.0.3",
-    "@types/jasmine": "~3.6.7",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^16.11.45",
-    "babel-loader": "^8.2.5",
     "chromatic": "^6.7.1",
-    "codelyzer": "^6.0.1",
+    "typescript": "~4.8.4"
-    "typescript": "~4.7.3"
   },
   "optionalDependencies": {
     "protractor": "~5.4.0",

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

@@ -84,7 +84,6 @@ const routes: Routes = [
     { path: "token", component: TokenResetPasswordComponent },
     { path: "landingpage", component: LandingPageComponent },
     { path: "auth/cookie", component: CookieComponent },
-    { loadChildren: () => import("./calendar/calendar.module").then(m => m.CalendarModule), path: "calendar" },
     { loadChildren: () => import("./discover/discover.module").then(m => m.DiscoverModule), path: "discover" },
     { loadChildren: () => import("./issues/issues.module").then(m => m.IssuesModule), path: "issues" },
     { loadChildren: () => import("./settings/settings.module").then(m => m.SettingsModule), path: "Settings" },

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

@@ -1,39 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-
-import { RequestService } from "../services";
-
-import { SharedModule } from "../shared/shared.module";
-import { PipeModule } from "../pipes/pipe.module";
-
-import * as fromComponents from './components';
-import { AuthGuard } from "../auth/auth.guard";
-import { CalendarComponent } from "./components/calendar.component";
-
-import { FullCalendarModule } from 'primeng/fullcalendar';
-import { CalendarService } from "../services/calendar.service";
-
-
-const routes: Routes = [
-    { path: "", component: CalendarComponent, canActivate: [AuthGuard] },
-];
-@NgModule({
-    imports: [
-        RouterModule.forChild(routes),
-        SharedModule,
-        PipeModule,
-        FullCalendarModule,
-    ],
-    declarations: [
-        ...fromComponents.components
-    ],
-    exports: [
-        RouterModule,
-    ],
-    providers: [
-        RequestService,
-        CalendarService
-    ],
-
-})
-export class CalendarModule { }

src/Ombi/ClientApp/src/app/calendar/components/calendar.component.html

@@ -1,3 +0,0 @@
-<div class="small-middle-container" *ngIf="entries">
-    <p-fullCalendar [events]="entries" [options]="options"></p-fullCalendar>
-</div>

src/Ombi/ClientApp/src/app/calendar/components/calendar.component.scss

@@ -1,87 +0,0 @@
-@import "~styles/variables.scss";
-
-.small-middle-container{
-	margin: auto;
-	width: 85%;
-}
-
-//Kinda restyled the entire calendar
-::ng-deep .dark .fc th {
-	background-color:#545454 !important;
-    color: #FFF;
-    border: 1px solid #303030;
-}
-
-::ng-deep .dark .fc td.ui-widget-content{
-	background-color:#424242 !important;
-    color: #FFF;
-    border: 1px solid #303030;
-}
-
-::ng-deep .dark .fc td.fc-head-container {
-    border: 1px solid #303030;
-}
-
-::ng-deep .dark fc-day-grid-event fc-h-event fc-event fc-start fc-end{
-    background:$accent-dark !important;
-}
-
-::ng-deep .ui-button {
-	margin-top:10px !important;
-	text-transform: uppercase;
-	text-decoration: none;
-	padding: 8px;
-	border: 1px solid rgb(221, 221, 221) !important;
-	display: inline-block;
-	transition: all 0.4s ease 0s;
-	background-color: $accent !important;
-	}
-
-::ng-deep .dark .ui-button {
-	background-color: $accent-dark !important;
-	border: 1px solid #494949 !important;
-	color: #494949 !important;
-}
-	
-::ng-deep .dark .ui-button:enabled:hover {
-	color: #303030 !important;
-	background: $accent-dark !important;
-	border-color: $accent-dark !important;
-	transition: all 0.4s ease 0s;
-	}
-
-::ng-deep .input-group-addon{
-    margin-left:10px;
-}
-
-::ng-deep .fc .fc-event{
-	background: $accent !important;
-	color:#FFF !important;
-	font-size:0.9em;
-	font-weight:400;
-	border: 0px solid !important;
-}
-
-::ng-deep .dark .fc .fc-event{
-	background:$accent-dark !important;
-	color:#303030 !important;
-	font-size:0.9em;
-	font-weight:400;
-}
-
-::ng-deep .fc-header-toolbar{
-	display:block;
-}
-
-::ng-deep .fc-left{
-	float:left;
-}
-
-::ng-deep .fc-right{
-	float:right;
-}
-
-::ng-deep .fc-center{
-	margin-left:44%;
-	padding-top: 10px;
-}

src/Ombi/ClientApp/src/app/calendar/components/calendar.component.ts

@@ -1,48 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-import { CalendarService } from "../../services/calendar.service";
-import { ICalendarModel } from "../../interfaces/ICalendar";
-
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-
-@Component({
-    templateUrl: "./calendar.component.html",
-    styleUrls: ["./calendar.component.scss"],
-})
-export class CalendarComponent implements OnInit {
-
-    public loadingFlag: boolean;
-    events: any[];
-    options: any;
-    entries: ICalendarModel[];
-
-    constructor(private calendarService: CalendarService) { }
-
-    public async ngOnInit() {
-        this.loading()
-        this.options = {
-            plugins: [dayGridPlugin, interactionPlugin],
-            defaultDate: new Date(),
-            header: {
-                left: 'prev,next',
-                center: 'title',
-                right: 'agendaWeek,month'
-            },
-            eventClick: (e: any) => {
-                e.preventDefault();
-            }
-        };
-
-        this.entries = await this.calendarService.getCalendarEntries();
-        this.finishLoading();
-    }
-
-    private loading() {
-        this.loadingFlag = true;
-    }
-
-    private finishLoading() {
-        this.loadingFlag = false;
-    }
-}

src/Ombi/ClientApp/src/app/calendar/components/index.ts

@@ -1,5 +0,0 @@
-import { CalendarComponent } from "./calendar.component";
-
-export const components: any[] = [
-    CalendarComponent,
-];

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .detailed-container {
     width: 400px;

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 #cardImage {
     border-radius: 5px;

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .ombi-card {
     padding: 5px;

src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .ombi-card {
     padding: 5px;

src/Ombi/ClientApp/src/app/issues/components/details-group/details-group.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 ::ng-deep .issue-card {
   border: 3px solid $ombi-background-primary-accent;

src/Ombi/ClientApp/src/app/issues/components/details/details.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .top-spacing {
   margin-top:2%;

src/Ombi/ClientApp/src/app/issues/components/issue-chat/issue-chat.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 ::ng-deep .mat-card {
   background: $ombi-background-primary-accent;

src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 .small-middle-container{
         height:100vh;
     }

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

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 body, html {
     height: 100% !important;

src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss

@@ -1,5 +1,5 @@
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
  ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
 body .ui-carousel .ui-carousel-content .ui-carousel-next {
     background-color: #ffffff;

src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss

@@ -1,5 +1,5 @@
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
  ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
 body .ui-carousel .ui-carousel-content .ui-carousel-next {
     background-color: #ffffff;

src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 a.media-icons:hover{
     color:$ombi-active;

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -1,5 +1,5 @@
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 //MINE
 @media (max-width: 570px) {
     h1 {

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 .sidenav-container {
     min-height: 100vh;
     -webkit-overflow-scrolling:touch;

src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .dark .mat-header-cell {
 	background: $accent-dark !important;

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .dark .mat-header-cell {
 	background: $accent-dark !important;

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .small-middle-container{
 	margin: auto;

src/Ombi/ClientApp/src/app/settings/about/about.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .mat-table {
     display: block;

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

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/ClientApp/src/app/settings/customization/customization.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/ClientApp/src/app/settings/landingpage/landingpage.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container{
 	margin: auto;
 	width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/ClientApp/src/app/settings/notifications/notificationtemplate.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 
 .small-middle-container{
 	margin: auto;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/ClientApp/src/app/settings/plex/components/watchlist/plex-watchlist.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,4 +1,4 @@
-@import "~styles/shared.scss";
+@import "./styles/shared.scss";
 .small-middle-container {
     margin: auto;
     width: 95%;

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

@@ -1,5 +1,5 @@
 
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .alert-info {
   background: $accent;

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

@@ -1,5 +1,5 @@
 
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .alert-info {
   background: $accent;

src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 
 .small-middle-container{
 	margin: auto;

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

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "./styles/variables.scss";
 .welcome-container{
     display:flex;
     height:100%;

src/Ombi/ClientApp/src/main.ts

@@ -3,7 +3,6 @@ import "jquery";
 
 import "bootstrap/dist/js/bootstrap";
 
-import "./styles/_imports.scss";
 
 import { environment } from "./environments/environment";
 

src/Ombi/ClientApp/src/styles/Styles.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 @import "./variables.scss";
 // Plus imports for other components in your app.
 // Include the common styles for Angular Material. We include this here so that you only

src/Ombi/ClientApp/src/styles/primeng-overrides.scss

@@ -1,4 +1,4 @@
-@import "Styles.scss";
+@import "./Styles.scss";
 // PrimeNG Carosel overrides
 .ui-carousel-dropdown {
     display:none;

src/Ombi/ClientApp/src/styles/shared.scss

@@ -1,4 +1,4 @@
-@import "~styles/variables.scss";
+@import "styles/variables.scss";
 /*@media (max-width: 978px) {
     .top-spacing {
         padding-top: 2%;

src/Ombi/ClientApp/src/styles/variables.scss

@@ -1,5 +1,5 @@
 // @import "./mat-palette.scss";
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 @import "./new-mat-palette.scss";
 // BASE
 // Define the palettes for your theme using the Material Design palettes available in palette.scss

src/Ombi/ClientApp/src/tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "ES2022",
     "types": [
       "node"
     ],
@@ -21,7 +21,8 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "files": [
     "main.ts",

src/Ombi/ClientApp/tsconfig.json

@@ -1,32 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "module": "esnext",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "downlevelIteration": true,
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "moduleResolution": "node",
-    "types": ["node"],
+    "importHelpers": true,
-    "resolveJsonModule":true,
+    "useDefineForClassFields": false,
-    "allowSyntheticDefaultImports":true,
+    "target": "ES2022",
-    "typeRoots": [
+    "module": "ES2022",
-      "node_modules/@types"
-    ],
     "lib": [
-      "es2017",
+      "ES2022",
       "dom"
     ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
-,
-  "files": [
-    "main.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
 }

tests/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules