upgrade to Angular 17

Author: jhades

README.md

@@ -22,11 +22,11 @@ With the following command the angular-cli will be installed globally in your ma
 
 We can install the master branch using the following commands:
 
-    git clone https://github.com/angular-university/angular-universal-course.git
+    git clone https://github.com/angular-university/angular-ssr-course.git
 
 This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:
 
-    cd angular-universal-course
+    cd angular-ssr-course
     npm install
 
 Its also possible to install the modules as usual using npm:
@@ -109,12 +109,6 @@ If you are looking for the [Serverless Angular with Firebase Course](https://ang
 
 ![Serverless Angular with Firebase Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/serverless-angular-small.png)
 
-# Angular Universal Course
-
-If you are looking for the [Angular Universal Course](https://angular-university.io/course/angular-universal-course), the repo with the full code can be found here:
-
-![Angular Universal Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-universal-small.png)
-
 # Angular PWA Course
 
 If you are looking for the [Angular PWA Course](https://angular-university.io/course/angular-pwa-course), the repo with the full code can be found here:

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-universal-course": {
+    "angular-ssr-course": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular-universal-course/browser",
+            "outputPath": "dist/angular-ssr-course/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -75,7 +75,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "angular-universal-course:build"
+            "buildTarget": "angular-ssr-course:build"
           },
           "configurations": {
             "development": {
@@ -84,14 +84,14 @@
               "sourceMap": true
             },
             "production": {
-              "buildTarget": "angular-universal-course:build:production"
+              "buildTarget": "angular-ssr-course:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "angular-universal-course:build"
+            "buildTarget": "angular-ssr-course:build"
           }
         },
         "test": {
@@ -116,18 +116,18 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-universal-course:serve"
+            "devServerTarget": "angular-ssr-course:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "angular-universal-course:serve:production"
+              "devServerTarget": "angular-ssr-course:serve:production"
             }
           }
         },
         "server": {
           "builder": "@angular-devkit/build-angular:server",
           "options": {
-            "outputPath": "dist/angular-universal-course/server",
+            "outputPath": "dist/angular-ssr-course/server",
             "main": "server.ts",
             "tsConfig": "tsconfig.server.json",
             "buildOptimizer": false,
@@ -163,12 +163,12 @@
           "builder": "@angular-devkit/build-angular:ssr-dev-server",
           "configurations": {
             "development": {
-              "browserTarget": "angular-universal-course:build:development",
-              "serverTarget": "angular-universal-course:server:development"
+              "browserTarget": "angular-ssr-course:build:development",
+              "serverTarget": "angular-ssr-course:server:development"
             },
             "production": {
-              "browserTarget": "angular-universal-course:build:production",
-              "serverTarget": "angular-universal-course:server:production"
+              "browserTarget": "angular-ssr-course:build:production",
+              "serverTarget": "angular-ssr-course:server:production"
             }
           },
           "defaultConfiguration": "development"
@@ -182,12 +182,12 @@
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-universal-course:build:production",
-              "serverTarget": "angular-universal-course:server:production"
+              "browserTarget": "angular-ssr-course:build:production",
+              "serverTarget": "angular-ssr-course:server:production"
             },
             "development": {
-              "browserTarget": "angular-universal-course:build:development",
-              "serverTarget": "angular-universal-course:server:development"
+              "browserTarget": "angular-ssr-course:build:development",
+              "serverTarget": "angular-ssr-course:server:development"
             }
           },
           "defaultConfiguration": "production"

e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('angular-universal-course app is running!');
+    expect(page.getTitleText()).toEqual('angular-ssr-course app is running!');
   });
 
   afterEach(async () => {

karma.conf.js

@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/angular-universal-course'),
+      dir: require('path').join(__dirname, './coverage/angular-ssr-course'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "angular-universal-course",
+  "name": "angular-ssr-course",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -8,11 +8,11 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "serve:prerender": "http-server -c-1 dist/angular-universal-course/browser",
-    "dev:ssr": "ng run angular-universal-course:serve-ssr",
-    "serve:ssr": "node dist/angular-universal-course/server/main.js",
-    "build:ssr": "ng build && ng run angular-universal-course:server",
-    "prerender": "ng run angular-universal-course:prerender"
+    "serve:prerender": "http-server -c-1 dist/angular-ssr-course/browser",
+    "dev:ssr": "ng run angular-ssr-course:serve-ssr",
+    "serve:ssr": "node dist/angular-ssr-course/server/main.js",
+    "build:ssr": "ng build && ng run angular-ssr-course:server",
+    "prerender": "ng run angular-ssr-course:prerender"
   },
   "private": true,
   "dependencies": {
@@ -53,4 +53,4 @@
     "ts-node": "~8.3.0",
     "typescript": "~5.2.2"
   }
-}
+}

server.ts

@@ -10,7 +10,7 @@ import bootstrap from './src/main.server';
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/angular-universal-course/browser');
+  const distFolder = join(process.cwd(), 'dist/angular-ssr-course/browser');
   const indexHtml = existsSync(join(distFolder, 'index.original.html'))
     ? join(distFolder, 'index.original.html')
     : join(distFolder, 'index.html');

src/app/about/about.component.html

@@ -2,7 +2,7 @@
 
 <div class="not-found">
 
-    <h1>Angular Universal In Depth</h1>
+    <h1>Angular SSR In Depth</h1>
 
     <img class="course-image mat-elevation-z10"
          src="https://angular-university.s3-us-west-1.amazonaws.com/course-images/angular-universal-course.jpg">

src/app/app.config.ts

@@ -54,6 +54,7 @@ export const appConfig: ApplicationConfig = {
     CoursesService,
     CourseResolver,
     provideAnimations(),
-    provideHttpClient(withInterceptorsFromDi(), withFetch()), provideClientHydration()
+    provideHttpClient(withInterceptorsFromDi(), withFetch()),
+    provideClientHydration()
   ]
 };

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Angular Universal In Depth</title>
+  <title>Angular SSR In Depth</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">