Initial commit

.gitignore

@@ -0,0 +1,66 @@
+.DS_STORE
+
+dist/
+bazel-out
+integration/bazel/bazel-*
+*.log
+node_modules/
+
+# CircleCI temporary file for cache key computation.
+# See `save_month_to_file` in `.circleci/config.yml`.
+month.txt
+
+# Include when developing application packages.
+pubspec.lock
+.c9
+.idea/
+.devcontainer/*
+!.devcontainer/README.md
+!.devcontainer/recommended-devcontainer.json
+!.devcontainer/recommended-Dockerfile
+.settings/
+.vscode/launch.json
+.vscode/settings.json
+.vscode/tasks.json
+*.swo
+*.swp
+modules/.settings
+modules/.vscode
+.vimrc
+.nvimrc
+
+# Don't check in secret files
+*secret.js
+
+# Ignore npm/yarn debug log
+npm-debug.log
+yarn-error.log
+
+# build-analytics
+.build-analytics
+
+# rollup-test output
+modules/rollup-test/dist/
+
+# User specific bazel settings
+.bazelrc.user
+
+# User specific ng-dev settings
+.ng-dev.user*
+
+.notes.md
+baseline.json
+
+# Ignore .history for the xyz.local-history VSCode extension
+.history
+
+# Husky
+.husky/_
+
+
+# Ignore cache created with the Angular CLI.
+.angular/
+
+# Ignore AIO files, useful when changing branches 
+aio/node_modules
+aio/out-tsc

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.16-alpine AS build
+COPY . /app
+WORKDIR /app
+RUN npm install && npm run build:prod && rm -rf node_modules/
+
+FROM nginx:1.17.9-alpine AS runtime
+COPY --from=build /app/default.conf /etc/nginx/conf.d/
+COPY --from=build /app/dist/ /var/www
+EXPOSE 80

Jenkinsfile

@@ -0,0 +1,36 @@
+pipeline {
+    agent any
+
+    stages {
+        stage('Docker build') {
+            steps {
+                sh '''
+                    docker build --network="host" -t darkbird/swave-frontend:latest .
+                '''
+            }
+        }
+        stage('Docker tag') {
+            steps {
+                sh '''
+                    docker image tag darkbird/swave-frontend:latest registry.xdarkbird.duckdns.org/darkbird/swave-frontend:latest
+                '''
+            }
+        }
+        stage('Docker push') {
+            steps {
+                sh '''
+                    docker push registry.xdarkbird.duckdns.org/darkbird/swave-frontend:latest
+                '''
+            }
+        }
+        stage('Docker clean') {
+            steps {
+                sh '''
+                    docker rmi darkbird/swave-frontend:latest
+                    docker rmi registry.xdarkbird.duckdns.org/darkbird/swave-frontend:latest
+                    docker image prune -f
+                '''
+            }
+        }
+    }
+}

README.md

@@ -0,0 +1,27 @@
+# VideoServerFrontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.9.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "video_server_frontend": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/video_server_frontend",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "video_server_frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "video_server_frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "video_server_frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

default.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+
+    root /var/www/video_server_frontend/browser;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "swave-frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:prod": "ng build --configuration=production",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.9",
+    "@angular/cli": "^17.0.9",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  }
+}

src/app/app.component.css

@@ -0,0 +1,16 @@
+.header {
+    background: linear-gradient(60deg, #E90363, #E267FE);
+    color: white;
+    padding: 10px;
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-bottom: 10px;
+    height: 50px;
+
+}
+
+.home-link {
+    line-height: 50px;
+    color: white;
+    text-decoration: none;
+}

src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="header">
+    <a routerLink="home" class="home-link">Home</a>
+</div>
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'video_server_frontend' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('video_server_frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, video_server_frontend');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, RouterLink],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'video_server_frontend';
+
+  searchVideo(query: string) {
+    console.log(`Search for ${query}`);
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

src/app/app.routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { HomepageComponent } from './pages/homepage/homepage.component';
+import { SearchComponent } from './pages/search/search.component';
+import { WatchComponent } from './pages/watch/watch.component';
+
+export const routes: Routes = [
+    { path: '', redirectTo: 'home', pathMatch: 'full' },
+    { path: 'home', component: HomepageComponent },
+    { path: 'search', component: SearchComponent },
+    { path: 'watch', component: WatchComponent },
+];

src/app/components/video-preview/video-preview.component.css

@@ -0,0 +1,7 @@
+.preview-container {
+    background-color: #222;
+    border-radius: 12px;
+    margin: 20px;
+    padding: 20px;
+    padding-top: 1px;
+}

src/app/components/video-preview/video-preview.component.html

@@ -0,0 +1,6 @@
+@if (this.video) {
+    <div class="preview-container">
+        <h1 (click)="click()">{{ this.video.title }}</h1>
+        <span>{{ this.video.filepath }}</span>
+    </div>
+}

src/app/components/video-preview/video-preview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoPreviewComponent } from './video-preview.component';
+
+describe('VideoPreviewComponent', () => {
+  let component: VideoPreviewComponent;
+  let fixture: ComponentFixture<VideoPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VideoPreviewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(VideoPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/video-preview/video-preview.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { Video } from '../../model/video';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-video-preview',
+  standalone: true,
+  imports: [],
+  templateUrl: './video-preview.component.html',
+  styleUrl: './video-preview.component.css'
+})
+export class VideoPreviewComponent {
+
+  @Input({ required: true }) video: Video | undefined;
+
+  constructor(private router: Router) {}
+
+  click() {
+    console.log(`Clicked on video ${this.video?.title}`);
+    this.router.navigate(['/watch'], { queryParams: { video: this.video?.filepath } });
+  }
+
+}

src/app/model/video.ts

@@ -0,0 +1,4 @@
+export interface Video {
+    title: string;
+    filepath: string;
+}

src/app/pages/homepage/homepage.component.css

@@ -0,0 +1,68 @@
+.search-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+    width: 60%;
+    margin-top: 110px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+
+    border: 1px solid #333;
+    border-radius: 12px;
+    height: 300px;
+}
+
+.search-title {
+    font-size: 3em;
+    margin-right: 10px;
+    margin-top: 0px;
+    margin-bottom: 50px;
+    color: white;
+}
+
+.search-box {
+    display: block;
+    width: 90%;
+    height: 40px;
+    padding: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    border-radius: 5px;
+    border: none;
+
+    font-size: 1em;
+    background-color: #333;
+    color: white;
+}
+
+.search-box:focus, .search-box:hover, .search-box:active {
+    outline: none;
+    /* border: 2px solid;
+    border-image: linear-gradient(60deg, #E90363, #E267FE) 1;
+    border-image-slice: 1;
+    border-radius: 5px; */
+    background-color: #444;
+}
+
+.search-button {
+    display: block;
+    width: calc(90% + 40px);
+    height: 35px;
+    border-radius: 5px;
+    border: none;
+    padding: 5px;
+    font-size: 1.3em;
+    background-color: #E90363;
+    color: white;
+    margin-top: 10px;
+    transition: background 250ms linear;
+}
+
+.search-button:disabled {
+    background: #2f2f2f;
+    color: #666;
+}

src/app/pages/homepage/homepage.component.html

@@ -0,0 +1,5 @@
+<div class="search-container">
+    <h1 class="search-title">Search a video</h1>
+    <input #searchBar class="search-box" type="text" placeholder="Search for a video" (keyup)="searchButton.disabled = searchBar.value.trim() === ''" required>
+    <button #searchButton (click)="searchVideo(searchBar.value)" class="search-button" disabled>Search</button>
+</div>

src/app/pages/homepage/homepage.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageComponent } from './homepage.component';
+
+describe('HomepageComponent', () => {
+  let component: HomepageComponent;
+  let fixture: ComponentFixture<HomepageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomepageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HomepageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/homepage/homepage.component.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-homepage',
+  standalone: true,
+  imports: [],
+  templateUrl: './homepage.component.html',
+  styleUrl: './homepage.component.css'
+})
+export class HomepageComponent {
+
+  constructor(private router: Router) { }
+
+  searchVideo(query: string): void {
+    this.router.navigate(['/search'], { queryParams: { query: query } });
+  }
+
+}

src/app/pages/search/search.component.css

@@ -0,0 +1,23 @@
+.search-container {
+    width: 60%;
+    margin: 0 auto;
+}
+
+.loader {
+    /* Dark grey with purple highlight */
+    border: 16px dotted #444;
+    border-top: 16px dotted #E90363;  
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/app/pages/search/search.component.html

@@ -0,0 +1,8 @@
+<div class="search-container">
+    @if (this.searching) {
+        <div class="loader"></div>  
+    }
+    @for (video of this.foundVideos; track $index) {
+        <app-video-preview [video]="video"></app-video-preview>
+    }
+</div>

src/app/pages/search/search.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/search/search.component.ts

@@ -0,0 +1,74 @@
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Video } from '../../model/video';
+import { VideoPreviewComponent } from '../../components/video-preview/video-preview.component';
+import { catchError, map, Observable } from 'rxjs';
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
+
+@Component({
+  selector: 'app-search',
+  standalone: true,
+  imports: [HttpClientModule, VideoPreviewComponent],
+  templateUrl: './search.component.html',
+  styleUrl: './search.component.css'
+})
+export class SearchComponent implements OnInit {
+
+  constructor(private http: HttpClient, private route: ActivatedRoute) {}
+
+  searching: boolean = false;
+  foundVideos: Video[] = [];
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      let query = params['query'];
+      if (query) {
+        this.performSearch(query);
+      }
+    });
+  }
+
+  performSearch(query: string): void {
+    this.searching = true;
+    const ws: WebSocketSubject<string> = webSocket<any>({
+      url: `ws://192.168.0.100:8190/search?q=${query}`,
+      deserializer: (e) => e.data,
+      serializer: (value) => value,
+    });
+
+    ws.pipe(
+      map((event: string) => {
+        // Mapping to an array of videos
+        const msgReceived: string = event;
+        const msgs = msgReceived.split('\n');
+        let videos: Video[] = [];
+        msgs.forEach(msg => {
+          if (msg) {
+            const video = JSON.parse(msg);
+            const title = video?.filename?.split('/').pop().replace('.mp4', '') ?? 'Unknown title';
+            videos.push({ title: title, filepath: video.filename } as Video);
+          }
+        });
+
+        return videos;        
+      })
+    ).subscribe({
+      next: videos => {
+        if (videos) {
+          videos.forEach(video => this.foundVideos.unshift(video));
+        }
+      },
+      error: err => {
+        if (err instanceof CloseEvent) {
+          console.log('WebSocket closed', err);
+        }
+        else {
+          console.error('Error on the socket', err);
+        }
+        this.searching = false;
+      }
+    });
+  }
+
+}

src/app/pages/watch/watch.component.css

@@ -0,0 +1,14 @@
+.video-container {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}

src/app/pages/watch/watch.component.html

@@ -0,0 +1,8 @@
+<div class="video-container">
+
+    <video controls>
+        <source #videoPlayerSource src="" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+
+</div>

src/app/pages/watch/watch.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WatchComponent } from './watch.component';
+
+describe('WatchComponent', () => {
+  let component: WatchComponent;
+  let fixture: ComponentFixture<WatchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WatchComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(WatchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/watch/watch.component.ts

@@ -0,0 +1,30 @@
+import { AfterContentInit, AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-watch',
+  standalone: true,
+  imports: [],
+  templateUrl: './watch.component.html',
+  styleUrl: './watch.component.css'
+})
+export class WatchComponent implements AfterViewInit {
+
+  @ViewChild('videoPlayerSource') playerSource: ElementRef | undefined;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngAfterViewInit(): void {
+    this.route.queryParams.subscribe(params => {
+      let video = params['video'];
+      if (video) {
+        console.log(`Watch video ${video}`);
+        if (this.playerSource) {
+          console.log('Player source is', this.playerSource);
+          this.playerSource.nativeElement.src = `http://192.168.0.100:8190/video?v=${video}`;
+        }
+      }
+    });
+  }
+
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>VideoServerFrontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/styles.css

@@ -0,0 +1,10 @@
+html {
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
+    color: white;
+}
+
+body {
+    margin: 0;
+    background-color: #181818;
+}

tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}