Upgrade to Angular 16

Author: jhades

README.md

@@ -3,7 +3,7 @@
 
 This repository contains the code of the [Angular Testing Course](https://angular-university.io/course/angular-testing-course).
 
-This course repository is updated to Angular v15, and there is a  package-lock.json file available, for avoiding semantic versioning installation issues.
+This course repository is updated to Angular v16, and there is a  package-lock.json file available, for avoiding semantic versioning installation issues.
 
 ![Angular Testing Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-testing-small.png)
 

package-lock.json

@@ -18,17 +18,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.0.2",
-    "@angular/cdk": "^15.0.1",
-    "@angular/common": "15.0.2",
-    "@angular/compiler": "15.0.2",
-    "@angular/core": "15.0.2",
-    "@angular/forms": "15.0.2",
-    "@angular/material": "^15.0.1",
-    "@angular/material-moment-adapter": "15.0.1",
-    "@angular/platform-browser": "15.0.2",
-    "@angular/platform-browser-dynamic": "15.0.2",
-    "@angular/router": "15.0.2",
+    "@angular/animations": "16.0.0",
+    "@angular/cdk": "^16.0.0",
+    "@angular/common": "16.0.0",
+    "@angular/compiler": "16.0.0",
+    "@angular/core": "16.0.0",
+    "@angular/forms": "16.0.0",
+    "@angular/material": "^16.0.0",
+    "@angular/material-moment-adapter": "16.0.0",
+    "@angular/platform-browser": "16.0.0",
+    "@angular/platform-browser-dynamic": "16.0.0",
+    "@angular/router": "16.0.0",
     "body-parser": "^1.18.3",
     "core-js": "^3.19.0",
     "cors": "^2.8.5",
@@ -39,13 +39,13 @@
     "npm-run-all": "^4.1.5",
     "rxjs": "6.5.4",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.1",
-    "@angular/cli": "^15.0.1",
-    "@angular/compiler-cli": "15.0.2",
-    "@angular/language-service": "15.0.2",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular/cli": "^16.0.0",
+    "@angular/compiler-cli": "16.0.0",
+    "@angular/language-service": "16.0.0",
     "@cypress/webpack-preprocessor": "^4.0.3",
     "@types/express": "^4.0.39",
     "@types/jasmine": "~4.3.0",
@@ -56,13 +56,12 @@
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-coverage": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "protractor": "~7.0.0",
     "start-server-and-test": "^1.9.1",
     "ts-node": "~3.2.0",
-    "typescript": "~4.8.2"
+    "typescript": "~5.0.4"
   }
 }

package.json

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from "./courses/home/home.component";
 import {AboutComponent} from "./about/about.component";
 import {CourseComponent} from "./courses/course/course.component";
-import {CourseResolver} from "./courses/services/course.resolver";
+import {courseResolver} from "./courses/services/course.resolver";
 
 const routes: Routes = [
     {
@@ -19,7 +19,7 @@ const routes: Routes = [
         path: 'courses/:id',
         component: CourseComponent,
         resolve: {
-            course: CourseResolver
+            course: courseResolver
         }
     },
     {

src/app/app-routing.module.ts

@@ -26,7 +26,6 @@ import { MatTableModule } from "@angular/material/table";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import {CoursesService} from "./courses/services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
-import {CourseResolver} from "./courses/services/course.resolver";
 import { CourseDialogComponent } from './courses/course-dialog/course-dialog.component';
 import {ReactiveFormsModule} from "@angular/forms";
 import {MatMomentDateModule} from "@angular/material-moment-adapter";

src/app/app.module.ts

@@ -27,7 +27,7 @@ import {AppRoutingModule} from '../app-routing.module';
 import {MatMomentDateModule} from '@angular/material-moment-adapter';
 import {ReactiveFormsModule} from '@angular/forms';
 import {CoursesService} from './services/courses.service';
-import {CourseResolver} from './services/course.resolver';
+import {courseResolver} from './services/course.resolver';
 
 @NgModule({
     declarations: [
@@ -67,8 +67,7 @@ import {CourseResolver} from './services/course.resolver';
         CourseDialogComponent
     ],
     providers: [
-        CoursesService,
-        CourseResolver
+        CoursesService
     ]
 })export class CoursesModule {
 

src/app/courses/courses.module.ts

@@ -1,24 +1,14 @@
-
-
-
-import {Injectable} from "@angular/core";
-import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
+import {inject} from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
 import {Course} from "../model/course";
 import {Observable} from "rxjs";
 import {CoursesService} from "./courses.service";
 
 
+export function courseResolver(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
 
-@Injectable()
-export class CourseResolver implements Resolve<Course> {
+  const coursesService = inject(CoursesService);
 
-    constructor(private coursesService:CoursesService) {
-
-    }
-
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
-        return this.coursesService.findCourseById(route.params['id']);
-    }
+  return coursesService.findCourseById(route.params['id']);
 
 }
-