1 operators

.browserslistrc

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

.gitignore

@@ -25,6 +25,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -3,23 +3,14 @@
 
 This repository contains the code of the [RxJs In Practice Course](https://angular-university.io/course/rxjs-course).
 
-This course repository is updated to Angular v6, and there is a  package-lock.json file available, for avoiding semantic versioning installation issues.
+This course repository is updated to Angular v20:
 
 ![RxJs In Practice Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png)
 
 
 # Installation pre-requisites
 
-IMPORTANT: Please use the latest Node and especially NPM, to make sure the package-lock.json is used.
-
-For running this project we need and npm installed on our machine. These are some tutorials to install node in different operating systems:
-
-*Its important to install the latest version of Node*
-
-- [Install Node and NPM on Windows](https://www.youtube.com/watch?v=8ODS6RM6x7g)
-- [Install Node and NPM on Linux](https://www.youtube.com/watch?v=yUdHk-Dk_BY)
-- [Install Node and NPM on Mac](https://www.youtube.com/watch?v=Imj8PgG3bZU)
-
+Please use Node 22 LTS (Long Term Support version).
 
 # Installing the Angular CLI
 
@@ -82,6 +73,11 @@ We can checkout the remote branch and start tracking it with a local branch that
 It's also possible to download a ZIP file for a given branch,  using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.
 
 # Other Courses
+# Modern Angular With Signals
+
+If you are looking for the [Modern Angular With Signals Course](https://angular-university.io/course/angular-signals-course), the repo with the full code can be found here:
+
+![Modern Angular With Signals Course](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg)
 
 # Angular PWA Course
 

angular.json

@@ -3,39 +3,49 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-material-course": {
+    "rxjs-course": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
             ],
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "extractLicenses": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -48,18 +58,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-material-course:build"
+            "buildTarget": "rxjs-course:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-material-course:build:production"
+              "buildTarget": "rxjs-course:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-material-course:build"
+            "buildTarget": "rxjs-course:build"
           }
         },
         "test": {
@@ -78,22 +88,10 @@
               "src/favicon.ico"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
-    "angular-material-course-e2e": {
+    "rxjs-course-e2e": {
       "root": "",
       "sourceRoot": "",
       "projectType": "application",
@@ -102,30 +100,41 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "angular-material-course:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "devServerTarget": "rxjs-course:serve"
           }
         }
       }
     }
   },
-  "defaultProject": "angular-material-course",
   "schematics": {
     "@schematics/angular:component": {
-      "styleext": "scss"
+      "style": "scss",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": ""
+      "prefix": "",
+      "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": {
+    "analytics": "cfcb7608-e88b-4213-8e97-1621fa16315e"
   }
-}
+}

package.json

@@ -4,56 +4,53 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "./node_modules/.bin/ng serve  --proxy-config ./proxy.json",
-    "server": "./node_modules/.bin/ts-node ./server/server.ts",
+    "start": "ng serve  --proxy-config ./proxy.json",
+    "server": "ts-node -P ./server/server.tsconfig.json ./server/server.ts",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "6.0.0",
-    "@angular/cdk": "^6.0.0",
-    "@angular/common": "6.0.0",
-    "@angular/compiler": "6.0.0",
-    "@angular/core": "6.0.0",
-    "@angular/forms": "6.0.0",
-    "@angular/http": "6.0.0",
-    "@angular/material": "^6.0.0",
-    "@angular/material-moment-adapter": "6.0.0",
-    "@angular/platform-browser": "6.0.0",
-    "@angular/platform-browser-dynamic": "6.0.0",
-    "@angular/router": "6.0.0",
+    "@angular/animations": "20.0.1",
+    "@angular/cdk": "^20.0.2",
+    "@angular/common": "20.0.1",
+    "@angular/compiler": "20.0.1",
+    "@angular/core": "20.0.1",
+    "@angular/forms": "20.0.1",
+    "@angular/material": "^20.0.2",
+    "@angular/material-moment-adapter": "20.0.2",
+    "@angular/platform-browser": "20.0.1",
+    "@angular/platform-browser-dynamic": "20.0.1",
+    "@angular/router": "20.0.1",
     "body-parser": "^1.18.3",
     "core-js": "^2.4.1",
+    "cors": "^2.8.5",
     "express": "^4.16.2",
-    "hammerjs": "^2.0.8",
-    "moment": "^2.20.1",
-    "rxjs": "6.1.0",
-    "zone.js": "^0.8.14"
+    "moment": "^2.22.2",
+    "rxjs": "6.5.4",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.0",
-    "@angular/cli": "^6.0.0",
-    "@angular/compiler-cli": "6.0.0",
-    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "^20.0.1",
+    "@angular/cli": "^20.0.1",
+    "@angular/compiler-cli": "20.0.1",
+    "@angular/language-service": "20.0.1",
     "@types/express": "^4.0.39",
-    "@types/jasmine": "~2.5.53",
+    "@types/jasmine": "~3.8.0",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~3.2.0",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.8.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.2",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "ts-node": "~3.2.0",
-    "tslint": "~5.7.0",
-    "typescript": "2.7.2"
+    "typescript": "5.8.3"
   }
 }

server/get-courses.route.ts

@@ -16,7 +16,13 @@ export function getAllCourses(req: Request, res: Response) {
     }
     else {
     */
+
+    setTimeout(() => {
+
         res.status(200).json({payload:Object.values(COURSES)});
+
+    }, 200);
+
    // }
 }
 

server/search-lessons.route.ts

@@ -9,7 +9,7 @@ import {setTimeout} from "timers";
 
 export function searchLessons(req: Request, res: Response) {
 
-    const queryParams = req.query;
+    const queryParams = req.query as any;
 
     const courseId = queryParams.courseId,
           filter = queryParams.filter || '',
@@ -36,4 +36,4 @@ export function searchLessons(req: Request, res: Response) {
     },1000);
 
 
-}
+}

server/server.ts

@@ -9,6 +9,10 @@ const bodyParser = require('body-parser');
 
 const app: Application = express();
 
+const cors = require('cors');
+
+app.use(cors({origin: true}));
+
 app.use(bodyParser.json());
 
 app.route('/api/courses').get(getAllCourses);
@@ -21,7 +25,7 @@ app.route('/api/courses/:id').put(saveCourse);
 
 
 
-const httpServer = app.listen(9000, () => {
+const httpServer:any = app.listen(9000, () => {
     console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port);
 });
 

server/server.tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es2017"]
+  }
+}

src/app/about/about.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector: 'about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+    selector: 'about',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css'],
+    standalone: false
 })
 export class AboutComponent implements OnInit {
 

src/app/app.component.css

@@ -1,8 +1,12 @@
 
->>> body {
+body {
     margin: 0;
 }
 
 main {
     margin: 30px;
+}
+
+mat-icon{
+    vertical-align: middle;
 }

src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule
@@ -12,17 +12,17 @@ describe('AppComponent', () => {
       ],
     }).compileComponents();
   }));
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
+    standalone: false
 })
 export class AppComponent {
   title = 'app';

src/app/app.module.ts

@@ -13,32 +13,32 @@ import { AboutComponent } from './about/about.component';
 import {MatTabsModule} from '@angular/material/tabs';
 import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
 import {CourseComponent} from "./course/course.component";
-import {
-    MatDatepickerModule,
-    MatDialogModule,
-    MatInputModule, MatListModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule,
-    MatSortModule,
-    MatTableModule,
-    MatToolbarModule
-} from "@angular/material";
-import {HttpClientModule} from "@angular/common/http";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import {  MatDialogModule } from "@angular/material/dialog";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTableModule } from "@angular/material/table";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatMomentDateModule} from "@angular/material-moment-adapter";
 
-@NgModule({
-    declarations: [
+@NgModule({ declarations: [
         AppComponent,
         HomeComponent,
         AboutComponent,
         CourseComponent,
         CoursesCardListComponent,
         CourseDialogComponent
     ],
-    imports: [
-        BrowserModule,
+    bootstrap: [AppComponent], imports: [BrowserModule,
         BrowserAnimationsModule,
-        HttpClientModule,
         MatMenuModule,
         MatButtonModule,
         MatIconModule,
@@ -57,13 +57,6 @@ import {MatMomentDateModule} from "@angular/material-moment-adapter";
         MatSelectModule,
         MatDatepickerModule,
         MatMomentDateModule,
-        ReactiveFormsModule
-    ],
-    providers: [
-
-    ],
-    bootstrap: [AppComponent],
-    entryComponents: [CourseDialogComponent]
-})
+        ReactiveFormsModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {
 }

src/app/course-dialog/course-dialog.component.css

@@ -1,10 +1,11 @@
 
 
-.mat-form-field {
+mat-form-field {
     display: block;
+    width: 100%;
 }
 
 textarea {
     height: 100px;
     resize: vertical;
-}
+}

src/app/course-dialog/course-dialog.component.html

@@ -56,12 +56,12 @@ <h2 mat-dialog-title>{{course.description}}</h2>
 
 <mat-dialog-actions>
 
-    <button class="mat-raised-button"
+    <button mat-raised-button
             (click)="close()">
         Close
     </button>
 
-    <button class="mat-raised-button mat-primary" #saveButton>
+    <button mat-raised-button color="primary" #saveButton (click)="save()">
         Save
     </button>
 

src/app/course-dialog/course-dialog.component.ts

@@ -1,25 +1,26 @@
 import {AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {Course} from "../model/course";
 import {FormBuilder, Validators, FormGroup} from "@angular/forms";
-import * as moment from 'moment';
+import moment from 'moment';
 import {fromEvent} from 'rxjs';
 import {concatMap, distinctUntilChanged, exhaustMap, filter, mergeMap} from 'rxjs/operators';
 import {fromPromise} from 'rxjs/internal-compatibility';
 
 @Component({
     selector: 'course-dialog',
     templateUrl: './course-dialog.component.html',
-    styleUrls: ['./course-dialog.component.css']
+    styleUrls: ['./course-dialog.component.css'],
+    standalone: false
 })
 export class CourseDialogComponent implements OnInit, AfterViewInit {
 
     form: FormGroup;
     course:Course;
 
-    @ViewChild('saveButton') saveButton: ElementRef;
+    @ViewChild('saveButton', { static: true }) saveButton: ElementRef;
 
-    @ViewChild('searchInput') searchInput : ElementRef;
+    @ViewChild('searchInput', { static: true }) searchInput : ElementRef;
 
     constructor(
         private fb: FormBuilder,
@@ -56,4 +57,7 @@ export class CourseDialogComponent implements OnInit, AfterViewInit {
         this.dialogRef.close();
     }
 
+  save() {
+
+  }
 }

src/app/course/course.component.ts

@@ -20,13 +20,17 @@ import {Lesson} from '../model/lesson';
 @Component({
     selector: 'course',
     templateUrl: './course.component.html',
-    styleUrls: ['./course.component.css']
+    styleUrls: ['./course.component.css'],
+    standalone: false
 })
 export class CourseComponent implements OnInit, AfterViewInit {
 
 
+    course$: Observable<Course>;
+    lessons$: Observable<Lesson[]>;
 
-    @ViewChild('searchInput') input: ElementRef;
+
+    @ViewChild('searchInput', { static: true }) input: ElementRef;
 
     constructor(private route: ActivatedRoute) {
 

src/app/courses-card-list/courses-card-list.component.css

@@ -5,5 +5,10 @@
 }
 
 .course-actions {
-    text-align: center;
-}
+    display: flex;
+  justify-content: center;
+}
+
+.course-actions button {
+  margin-right: 5px;
+}

src/app/courses-card-list/courses-card-list.component.html

@@ -16,11 +16,11 @@
 
     <mat-card-actions class="course-actions">
 
-        <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
+        <button mat-button mat-raised-button color="primary" [routerLink]="['/courses', course.id]">
             VIEW COURSE
         </button>
 
-        <button mat-button class="mat-raised-button mat-accent"
+        <button mat-button mat-raised-button color="accent"
                 (click)="editCourse(course)">
             EDIT
         </button>

src/app/courses-card-list/courses-card-list.component.ts

@@ -1,12 +1,13 @@
 import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {Course} from "../model/course";
-import {MatDialog, MatDialogConfig} from "@angular/material";
+import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {CourseDialogComponent} from "../course-dialog/course-dialog.component";
 
 @Component({
     selector: 'courses-card-list',
     templateUrl: './courses-card-list.component.html',
-    styleUrls: ['./courses-card-list.component.css']
+    styleUrls: ['./courses-card-list.component.css'],
+    standalone: false
 })
 export class CoursesCardListComponent implements OnInit {
 

src/app/home/home.component.ts

@@ -7,7 +7,8 @@ import {catchError, delayWhen, map, retryWhen, shareReplay, tap} from 'rxjs/oper
 @Component({
     selector: 'home',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.css']
+    styleUrls: ['./home.component.css'],
+    standalone: false
 })
 export class HomeComponent implements OnInit {
 

src/polyfills.ts

@@ -34,30 +34,19 @@
 // import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
-
-/**
- * Required to support Web Animations `@angular/platform-browser/animations`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
 
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

src/styles.scss

@@ -1,17 +1,35 @@
-/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
 
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 
-@import "~@angular/material/theming";
+@include mat.elevation-classes();
+@include mat.app-background();
 
-// Include non-theme styles for core.
-@include mat-core();
+$dark-primary-text: rgba(black, 0.87);
 
-// Define a theme.
-$primary: mat-palette($mat-pink);
-$accent:  mat-palette($mat-deep-purple, A200, A100, A400);
+$light-primary-text: white;
 
-$theme: mat-light-theme($primary, $accent);
+$primary: mat.m2-define-palette(mat.$m2-pink-palette, 500);
 
-// Include all theme styles for the components.
-@include angular-material-theme($theme);
+$accent: mat.m2-define-palette(mat.$m2-deep-purple-palette, A200, A100, A400);
+
+$theme: mat.m2-define-light-theme((
+  color: (
+    primary: $primary,
+    accent: $accent,
+  ),
+  typography: mat.m2-define-typography-config(),
+  density: 0,
+));
+
+@include mat.all-component-themes($theme);
+
+.mat-elevation-z7 {
+  box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f !important;
+}
+
+.mat-elevation-z10 {
+  box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f !important;
+}

src/test.ts

@@ -14,19 +14,16 @@ import {
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare const __karma__: any;
-declare const require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
 // Finally, start Karma to run the tests.
 __karma__.start();

src/tsconfig.app.json

@@ -3,11 +3,13 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "es2015",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

src/tsconfig.spec.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "baseUrl": "./",
-    "module": "commonjs",
-    "target": "es5",
     "types": [
       "jasmine",
       "node"

tsconfig.json

@@ -1,20 +1,22 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2017",
       "dom",
       "ES2017.object"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }

tslint.json

@@ -11,6 +11,9 @@
       "check-space"
     ],
     "curly": true,
+    "deprecation": {
+      "severity": "warning"
+    },
     "eofline": true,
     "forin": true,
     "import-blacklist": [
@@ -69,7 +72,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [
@@ -126,12 +128,12 @@
       "app",
       "kebab-case"
     ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true,