Shahul/1 components

.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 [Angular Core Deep Dive](https://angular-university.io/course/angular-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 v18:
 
 ![Angular Core Deep Dive](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.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)
-
+IMPORTANT: Please use Node 18 LTS (Long Term Support version). 
 
 # Installing the Angular CLI
 

angular.json

@@ -4,34 +4,62 @@
   "newProjectRoot": "projects",
   "projects": {
     "angular-course": {
+      "i18n": {
+        "locales": {
+          "fr": {
+            "translation": "src/locale/messages.fr.xlf",
+            "baseHref": ""
+          }
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "",
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/angular-course",
+            "outputPath": {
+              "base": "dist/angular-course"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               {
-                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+                "inject": true
               },
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              {
+                "input": "node_modules/document-register-element/build/document-register-element.js",
+                "inject": true
+              }
+            ],
+            "extractLicenses": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -41,30 +69,43 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "extractLicenses": true
+            },
+            "fr": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "outputPath": {
+                "base": "dist/angular-course-fr/"
+              },
+              "i18nFile": "src/locale/messages.fr.xlf",
+              "i18nLocale": "fr",
+              "i18nMissingTranslation": "ignore"
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-course:build"
+            "buildTarget": "angular-course:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-course:build:production"
+              "buildTarget": "angular-course:build:production"
+            },
+            "fr": {
+              "buildTarget": "angular-course:build:fr"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-course:build"
+            "buildTarget": "angular-course:build"
           }
         },
         "test": {
@@ -76,7 +117,8 @@
             "karmaConfig": "src/karma.conf.js",
             "styles": [
               {
-                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+                "inject": true
               },
               "src/styles.css"
             ],
@@ -86,18 +128,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -116,18 +146,11 @@
               "devServerTarget": "angular-course:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
   },
-  "defaultProject": "angular-course"
-}
+  "cli": {
+    "analytics": "e878a578-eb4f-4c7c-bbaf-6f0c4ac42135"
+  }
+}

package.json

@@ -8,46 +8,47 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "server": "./node_modules/.bin/ts-node ./server.ts"
+    "server": "ts-node -P ./server.tsconfig.json ./server.ts"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.0",
-    "@angular/cdk": "^6.2.0",
-    "@angular/common": "^6.1.0",
-    "@angular/compiler": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/forms": "^6.1.0",
-    "@angular/http": "^6.1.0",
-    "@angular/material": "^6.4.6",
-    "@angular/platform-browser": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
-    "@angular/router": "^6.1.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/elements": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/localize": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "body-parser": "^1.18.3",
     "core-js": "^2.5.4",
+    "cors": "^2.8.5",
+    "document-register-element": "1.8.1",
     "express": "^4.16.3",
-    "rxjs": "^6.0.0",
-    "zone.js": "~0.8.26"
+    "rxjs": "^6.5.4",
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.0",
-    "@angular/cli": "~6.1.4",
-    "@angular/compiler-cli": "^6.1.0",
-    "@angular/language-service": "^6.1.0",
-    "@types/jasmine": "~2.8.6",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular/cli": "^18.0.1",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.0",
-    "karma-jasmine": "~1.1.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
+    "@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-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "typescript": "~2.7.2"
+    "tslint": "~6.1.0",
+    "typescript": "~5.4.5"
   }
-}
+}

server.ts

@@ -4,12 +4,13 @@ import * as express from 'express';
 import {Application} from "express";
 import {getAllCourses} from './server/get-courses.route';
 import {saveCourse} from './server/save-course.route';
-
+const cors = require('cors');
 
 const bodyParser = require('body-parser');
 
 const app: Application = express();
 
+app.use(cors({origin: true}));
 app.use(bodyParser.json());
 
 app.route('/api/courses').get(getAllCourses);

server.tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

src/app/app.component.html

@@ -1,27 +1,48 @@
 <div class="top-menu">
-
-    <img class="logo"
-         src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png">
-
+  <img
+    class="logo"
+    src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png"
+  />
 </div>
 
-
-<div class="courses">
-
-    <div class="course-card">
-
-        <div class="course-title">
-            Angular Core Deep Dive
-        </div>
-        <img width="300" alt="Angular Logo"
-             src="https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png">
-
-        <div class="course-description">
-            A detailed walk-through of the most important part of Angular - the Core and Common modules.
-        </div>
-
+<div class="courses" #containerRef>
+  <ng-template #blankImage let-courseName="description">
+    <p class="warn">{{ courseName }} has no image is available yet.</p>
+    <img src="/assets/empty-image.png" />
+  </ng-template>
+
+  @for (course of courses; track trackCourse(index, course); let index = $index;
+  let count = $count) {
+  <course-card
+    [course]="course"
+    [cardIndex]="index + 1"
+    [class.is-first]="$first"
+    [class.is-last]="$last"
+    [class.is-even]="$even"
+    [class.is-odd]="$odd"
+    [noImageTpl]="blankImage"
+    (courseSelected)="onCourseSelected($event)"
+  >
+    <course-image [src]="course?.iconUrl" />
+
+    <div class="course-description">
+      {{ course.longDescription }}
     </div>
-
+  </course-card>
+  } @empty {
+
+  <h1>No courses found!</h1>
+
+  }
+
+  <!-- <course-card
+    *ngFor="let course of courses; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd"
+    (courseSelected)="onCourseSelected($event)"
+    [course]="course"
+    [cardIndex]="i + 1"
+    [class.is-first]="isFirst"
+    [class.is-last]="isLast"
+    [class.is-even]="isEven"
+    [class.is-odd]="isOdd"
+  /> -->
 </div>
-
-

src/app/app.component.spec.ts

@@ -1,24 +1,24 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         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 'angular-course'`, async(() => {
+  it(`should have as title 'angular-course'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('angular-course');
   }));
-  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,13 +1,38 @@
-import { Component } from '@angular/core';
-import {COURSES} from '../db-data';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from "@angular/core";
+import { COURSES } from "../db-data";
+import { Course } from "./model/course";
+import { CourseCardComponent } from "./course-card/course-card.component";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
+  courses = COURSES;
 
+  @ViewChild("containerRef") containerDiv: ElementRef;
+  @ViewChild("cardRef") card: CourseCardComponent;
+  @ViewChildren(CourseCardComponent) cards: QueryList<CourseCardComponent>;
 
+  constructor() {}
 
+  ngAfterViewInit(): void {
+    this.cards.changes.subscribe((cards) => console.log(cards));
+  }
+
+  onCourseSelected(course: Course) {
+    console.log("app compnent - button clicked ....", course);
+  }
+
+  trackCourse(index: number, course: Course) {
+    return index + course?.id;
+  }
 }

src/app/app.module.ts

@@ -1,18 +1,15 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
 
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppComponent } from "./app.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { CourseCardComponent } from "./course-card/course-card.component";
+import { CourseImageComponent } from "./course-image/course-image.component";
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule
-  ],
+  declarations: [AppComponent, CourseCardComponent, CourseImageComponent],
+  imports: [BrowserModule, BrowserAnimationsModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -0,0 +1,3 @@
+.course-card.beginner {
+    background: lightsalmon;
+}

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

@@ -0,0 +1,40 @@
+<ng-container *ngIf="course; else noCourse">
+  <div #container class="course-card" [ngClass]="cardClasses()">
+    <div class="course-title" [ngStyle]="cardStyles()">
+      {{ cardIndex || "" + " " + course.description }}
+    </div>
+
+    <ng-content
+      select="course-image"
+      *ngIf="course.iconUrl; else noImage"
+    ></ng-content>
+
+    <ng-template #noImage>
+      <ng-container
+        *ngTemplateOutlet="
+          noImageTpl;
+          context: { description: course.description }
+        "
+      ></ng-container>
+    </ng-template>
+
+    <ng-content select=".course-description"></ng-content>
+
+    <div class="course-category">
+      @switch (course.category) { @case ("BEGINNER") {
+      <div class="category">Beginner</div>
+      } @case ("INTERMEDIATE") {
+      <div class="category">Intermediate</div>
+      } @case ("ADVANCED") {
+      <div class="category">Advanced</div>
+      } @default {
+      <div class="category">Unknown</div>
+      } }
+    </div>
+
+    <button (click)="onCourseViewed()">View Course</button>
+  </div>
+</ng-container>
+<ng-template #noCourse>
+  <p>Invalid Course!</p>
+</ng-template>

src/app/course-card/course-card.component.spec.ts

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

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

@@ -0,0 +1,50 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  TemplateRef,
+} from "@angular/core";
+import { Course } from "../model/course";
+import { CourseImageComponent } from "../course-image/course-image.component";
+
+@Component({
+  selector: "course-card",
+  templateUrl: "./course-card.component.html",
+  styleUrl: "./course-card.component.css",
+})
+export class CourseCardComponent implements AfterViewInit, AfterContentInit {
+  @Input({ required: true }) course: Course;
+  @Input({ required: true }) cardIndex: number;
+  @Input() noImageTpl: TemplateRef<any>;
+  @Output("courseSelected") courseEmitter = new EventEmitter<Course>();
+  @ContentChildren(CourseImageComponent, { read: ElementRef })
+  images: QueryList<ElementRef>;
+
+  ngAfterViewInit(): void {
+    console.log(this.images);
+  }
+
+  ngAfterContentInit(): void {
+    console.log(this.images);
+  }
+
+  onCourseViewed() {
+    this.courseEmitter.emit(this.course);
+  }
+
+  cardClasses() {
+    if (this.course.category === "BEGINNER") {
+      return ["beginner"];
+    }
+  }
+
+  cardStyles() {
+    return { "text-decoration": "none" };
+  }
+}

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

@@ -0,0 +1,7 @@
+<div class="course-image" #courseImage>
+  @if(imageUrl) {
+  <img width="300" alt="Angular Logo" [src]="imageUrl" />
+  } @else {
+  <h2>No image available!</h2>
+  }
+</div>

src/app/course-image/course-image.component.spec.ts

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

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

@@ -0,0 +1,14 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "course-image",
+  templateUrl: "./course-image.component.html",
+  styleUrl: "./course-image.component.css",
+})
+export class CourseImageComponent {
+  @Input('src') imageUrl: string;
+
+  constructor() {
+    console.log(this.imageUrl);
+  }
+}

src/app/model/course.ts

@@ -1,10 +1,8 @@
-
-
 export interface Course {
-    id:number;
-    description:string;
-    iconUrl: string;
-    longDescription: string;
-    category:string;
-    lessonsCount:number;
+  id: number;
+  description: string;
+  iconUrl: string;
+  longDescription: string;
+  category: string;
+  lessonsCount: number;
 }

src/assets/styles.css

@@ -1,26 +1,95 @@
 
+course-card {
+  display: block;
+}
 
 .course-card {
-    margin-bottom: 40px;
-    text-align: center;
-    border-radius: 4px;
-    padding: 20px 0;
-    box-shadow: 0 1px 16px 0 rgba(0,0,0,.2), 0 2px 8px 0 rgba(0,0,0,.14), 0 4px 8px -1px rgba(0,0,0,.12);
+  margin-bottom: 40px;
+  text-align: center;
+  border-radius: 4px;
+  padding: 20px 0;
+  box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12);
 }
 
-
-.course-title {
-    font-size: 27px;
-    font-weight: bold;
+.course-card .course-title {
+  font-size: 27px;
+  font-weight: bold;
 }
 
-.course-description {
-    max-width: 360px;
-    margin: 0 auto;
-    margin-top: 15px;
+.course-card .course-description {
+  max-width: 360px;
+  margin: 0 auto;
+  margin-top: 15px;
+  user-select: none;
 }
 
 .course-card img {
-    border-radius: 4px;
-    margin-top: 10px;
-}
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+button {
+  margin-top: 20px;
+  height: 40px;
+  font-size: 20px;
+  background: #1a7ce7;
+  color: white;
+  border-radius: 4px;
+}
+
+course-card.is-first {
+  border-top: 2px solid grey;
+  padding-top: 20px;
+}
+
+course-card.is-last {
+  border-bottom: 2px solid grey;
+  padding-top: 20px;
+}
+
+course-card.is-even {
+  background: lightgray;
+}
+
+course-card.is-odd {
+  background: lightcyan;
+}
+
+.course-category {
+  margin-top: 15px;
+}
+
+.category {
+  margin-top: 15px;
+  background: lightcyan;
+  font-size: 14px;
+  color: grey;
+  border: 1px solid grey;
+  border-radius: 4px;
+  padding: 2px 3px;
+  display: inline;
+}
+
+.demo {
+  max-width: 300px;
+  margin: 20px auto;
+  font-size: 25px;
+}
+
+.warn {
+  color: red;
+}
+
+.highlighted {
+  box-shadow: 0 2px 16px 0 #de1e19, 0 3px 8px 0 rgba(226, 21, 19, 0.47), 0 6px 8px -1px #b41c18;
+}
+
+
+
+
+
+
+
+
+
+

src/db-data.ts

@@ -1,88 +1,102 @@
-
-
 export const COURSES: any = [
+  {
+    id: 1,
+    description: "Angular core deep Dive",
+    // iconUrl:
+    //   "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png",
+    longDescription:
+      "A detailed walk-through of the most important part of Angular - the Core and Common modules",
+    category: "INTERMEDIATE",
+    lessonsCount: 10,
+  },
+  {
+    id: 2,
+    description: "RxJs In Practice Course",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png",
+    longDescription:
+      "Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples",
+    category: "BEGINNER",
+    lessonsCount: 10,
+  },
 
-    {
-        id: 1,
-        description: "Angular Core Deep Dive",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png',
-        longDescription: "A detailed walk-through of the most important part of Angular - the Core and Common modules",
-        category: 'ADVANCED',
-        lessonsCount: 10
-    },
-    {
-        id: 2,
-        description: "RxJs In Practice Course",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png',
-        longDescription: "Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples",
-        category: 'BEGINNER',
-        lessonsCount: 10
-    },
-
-    {
-        id: 3,
-        description: 'NgRx In Depth',
-        longDescription: "Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics.",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png',
-        category: 'ADVANCED'
-    },
-
-    {
-        id: 4,
-        description: "Angular for Beginners",
-        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png',
-        longDescription: "Establish a solid layer of fundamentals, learn what's under the hood of Angular",
-        category: 'BEGINNER',
-        lessonsCount: 10
-    },
-    {
-        id: 5,
-        description: 'Angular Security Course',
-        longDescription: "Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png',
-        category: 'ADVANCED',
-        lessonsCount: 11
-    },
-    {
-        id: 6,
-        description: 'Angular PWA Course',
-        longDescription: "<p class='course-description'>Learn Angular Progressive Web Applications, build the future of the Web Today.",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png',
-        category: 'ADVANCED',
-        lessonsCount: 8
-    },
-    {
-        id: 7,
-        description: 'Angular Advanced Course',
-        longDescription: "Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm",
-        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png',
-        category: 'ADVANCED'
-    },
-    {
-        id: 8,
-        description: 'Complete Typescript Course',
-        longDescription: "Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.",
-        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png',
-        category: 'BEGINNER'
-    },
-    {
-        id: 9,
-        description: 'Angular Architecture Course',
-        longDescription: "Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.",
-        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png',
-        category: 'BEGINNER'
-    },
-    {
-        id: 10,
-        description: "Angular Material Course",
-        iconUrl: "https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png",
-        longDescription: "Build Applications with the official Angular Widget Library",
-        category: 'ADVANCED'
-    }
+  {
+    id: 3,
+    description: "NgRx In Depth",
+    longDescription:
+      "Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics.",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png",
+    category: "ADVANCED",
+  },
 
+  {
+    id: 4,
+    description: "Angular for Beginners",
+    iconUrl:
+      "https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png",
+    longDescription:
+      "Establish a solid layer of fundamentals, learn what's under the hood of Angular",
+    category: "BEGINNER",
+    lessonsCount: 10,
+  },
+  {
+    id: 5,
+    description: "Angular Security Course",
+    longDescription:
+      "Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png",
+    category: "ADVANCED",
+    lessonsCount: 11,
+  },
+  {
+    id: 6,
+    description: "Angular PWA Course",
+    longDescription:
+      "<p class='course-description'>Learn Angular Progressive Web Applications, build the future of the Web Today.",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png",
+    category: "ADVANCED",
+    lessonsCount: 8,
+  },
+  {
+    id: 7,
+    description: "Angular Advanced Course",
+    longDescription:
+      "Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm",
+    iconUrl:
+      "https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png",
+    category: "ADVANCED",
+  },
+  {
+    id: 8,
+    description: "Complete Typescript Course",
+    longDescription:
+      "Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.",
+    iconUrl:
+      "https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png",
+    category: "BEGINNER",
+  },
+  {
+    id: 9,
+    description: "Angular Architecture Course",
+    longDescription:
+      "Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png",
+    category: "BEGINNER",
+  },
+  {
+    id: 10,
+    description: "Angular Material Course",
+    iconUrl:
+      "https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png",
+    longDescription:
+      "Build Applications with the official Angular Widget Library",
+    category: "ADVANCED",
+  },
 ];
 
-
-export function findCourseById(courseId:number) {
-    return COURSES.find(course => course.id === courseId);
-}
+export const findCourseById = (courseId: number) =>
+  COURSES.find((course) => course.id === courseId);

src/environments/environment.ts

@@ -12,4 +12,4 @@ export const environment = {
  * below file. Don't forget to comment it out in production mode
  * because it will have a performance impact when errors are thrown
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -34,24 +38,12 @@
 // 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';
-
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
@@ -71,7 +63,7 @@ import 'core-js/es7/reflect';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

src/test.ts

@@ -1,20 +1,16 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // 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);

src/tsconfig.app.json

@@ -4,8 +4,11 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

tsconfig.json

@@ -3,19 +3,20 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }

tslint.json

@@ -72,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": [
@@ -117,12 +116,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "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