Upgrade frontend Angular toolchain to v20

angular.json

@@ -182,10 +182,30 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "style": "scss"
+      "style": "scss",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "app",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {

package.json

@@ -21,18 +21,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^19.2.21",
-    "@angular/animations": "^19.2.18",
-    "@angular/cdk": "^19.2.19",
-    "@angular/common": "^19.2.18",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.2.18",
-    "@angular/localize": "^19.2.18",
-    "@angular/material": "^19.2.19",
-    "@angular/platform-browser": "^19.2.18",
-    "@angular/platform-browser-dynamic": "^19.2.18",
-    "@angular/router": "^19.2.18",
+    "@angular-devkit/core": "^20.3.17",
+    "@angular/animations": "^20.3.16",
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.16",
+    "@angular/compiler": "^20.3.16",
+    "@angular/core": "^20.3.16",
+    "@angular/forms": "^20.3.16",
+    "@angular/localize": "^20.3.16",
+    "@angular/material": "^20.2.14",
+    "@angular/platform-browser": "^20.3.16",
+    "@angular/platform-browser-dynamic": "^20.3.16",
+    "@angular/router": "^20.3.16",
     "@fontsource/material-icons": "^4.5.4",
     "@ngneat/content-loader": "^7.0.0",
     "@videogular/ngx-videogular": "^6.0.0",
@@ -53,10 +53,10 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.21",
-    "@angular/cli": "^19.2.21",
-    "@angular/compiler-cli": "^19.2.18",
-    "@angular/language-service": "^19.2.18",
+    "@angular-devkit/build-angular": "^20.3.17",
+    "@angular/cli": "^20.3.17",
+    "@angular/compiler-cli": "^20.3.16",
+    "@angular/language-service": "^20.3.16",
     "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "^4.3.1",

src/app/posts.services.ts

@@ -1,11 +1,11 @@
-import {Injectable, isDevMode, Inject} from '@angular/core';
+import {Injectable, isDevMode, Inject, DOCUMENT} from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
 import { THEMES_CONFIG } from '../themes';
 import { Router, ActivatedRouteSnapshot } from '@angular/router';
-import { DOCUMENT } from '@angular/common';
+
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {

src/app/youtube-search.service.spec.ts

@@ -6,7 +6,7 @@ describe('YoutubeSearchService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: YoutubeSearchService = TestBed.get(YoutubeSearchService);
+    const service: YoutubeSearchService = TestBed.inject(YoutubeSearchService);
     expect(service).toBeTruthy();
   });
 });

tsconfig.json

@@ -7,7 +7,7 @@
     "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "ES2022",