Feature/angular 20 rework

* chore: bump to angular v20

* docs: migrate all the slides in english

* refactor(docs:presentation): naming and format

* refactor(docs:basics): rework basics chapter

* refactor(docs:architecture): rework architecture chapter

* refactor(docs:*): rework cli components and data binding chapter

* refactor(app:01-hands-on): bootstrap now on the component and not on the module

* refactor(docs:*): rework event lifecycle and server-communication chapter

* refactor(apps:*): rework event lifecycle and server-communication chapter

* refactor(apps:04-binding): rework 04-binding exercise

* refactor(apps:05-events): rework 05-events exercice

* refactor(apps:06-http): rework 06-http exercise

* refactor(apps, docs): rework basic routing concepts

* refactor(apps, docs): rework loop concepts

* refactor(apps, docs): rework input and output concepts and workshop

* feat(apps:*): implement zoneless

* feat(apps:04-binding, 05-events): implement zoneless

* feat(apps:06-http, 07-router): implement zoneless

* feat(apps:08-ng-for): implement zoneless

* feat(apps:09-input): implement zoneless

* feat(apps:10-output): implement zoneless

* refactor(apps,docs): rework service creation concepts

* refactor(docs:dependency-injection): rework dependency injection chapter

* refactor(pipes): rework pipe chapter

* refactor(apps,docs): rewrite exercise 12-pipe-using documentation with detailed steps and concepts

* refactor(apps,docs): rework custom pipe exercise with improved implementation and zoneless support

* refactor(apps,docs): rework directive exercise and rename to control-flow, implement zoneless support

* refactor(apps,docs): rework directive custom exercise and support

* refactor(docs, apps): rework template driven form concepts

* refactor(docs, app): rework reactive form chapter

* refactor(doc, apps): rework lazyloading, guard and resolver chapter

* refactor(docs, apps): rework interceptors chapter

* refactor(docs, apps): rework teleportation chapter

* refactor: remove useless workshop

* fix(ci): remove token nx cloud

* refactor(docs, apps): rework hostbinding and hostlistener workshop

* refactor(docs, app): rework structural directive chapter

* fix(apps): useless attribute validation for reactive forms

* refactor(docs, apps): rework custom form control concepts

* refactor(docs): rework change detection concepts

* refactor(docs, apps): rework elf state management concept

* fix(apps): undefined name when creating person

* fix(server-express): random id is not correctly created

* refactor(docs, apps): rework ngxs chapter

* refactor(docs, apps): rework ngrx chapter

* refactor(docs,apps): rework unit test chapter

* refactor(docs): rework PWA chapter

* refactor(docs): rework server side rendering chapter

* chore: replace npm by bun

* fix(apps): regression build and test after rework

* docs(docs): rework library chapter

* docs(docs):rework native federation chapter

* docs(docs):rework flow school

* refactor(docs,apps): rework performance chapter

Author: Nicoss54

.github/actions/install-dependencies/action.yml

@@ -0,0 +1,20 @@
+name: 'Install dependencies'
+description: Install node and bun, and finally install all dependencies of the project
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Bun version 1.x
+      uses: oven-sh/setup-bun@v2
+
+    - name: Cache node_modules
+      id: cache-modules
+      uses: actions/cache@v4
+      with:
+        lookup-only: true
+        path: '**/node_modules'
+        key: bun-${{ hashFiles('bun.lockb', 'bun.lock') }}
+
+    - name: Install dependencies
+      run: bun install --frozen-lockfile
+      shell: bash

.github/workflows/tp.yml

@@ -1,35 +1,33 @@
-name: TP CI Action
-
-on: [ push ]
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [ opened, reopened, synchronize ]
+
+permissions:
+  actions: read
+  contents: read
 
 jobs:
   build-and-run-tests:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Use Node.js 20.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
-
-      - name: Install last version of npm
-        run: npm install -g npm@latest
-
-      - name: Install dependencies
-        run: npm install ci
+      - name: Install bun, and dependencies
+        uses: ./.github/actions/install-dependencies
 
-      - name: Run lint
-        run: npm run lint:ci
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'main'
 
-      - name: Run build
-        run: npm run build:ci
+      # This line is needed for nx affected to work when CI is running on a PR
+      - run: git branch --track main origin/main || exit 0
 
-      - name: Run tests
-        run: npm run test:ci
+      - run: bunx nx affected -t lint test build --parallel=5 --exclude=docs

.gitignore

@@ -53,4 +53,6 @@ workshop/dist
 .fleet
 
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.prettierignore

@@ -25,7 +25,6 @@
 /package-lock.json
 /yarn.lock
 
-*.md
 
 /workshop/dist
 

apps/01-hands-on-solution/project.json

@@ -61,7 +61,8 @@
           "buildTarget": "01-hands-on-solution:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",

apps/01-hands-on-solution/src/app/app.component.ts

@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
   selector: 'sfeir-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false,
+  imports: [MatCardModule, MatToolbarModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   name = 'SFEIR - LUXEMBOURG';

apps/01-hands-on-solution/src/app/app.module.ts

@@ -1,13 +1,11 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, provideZonelessChangeDetection } from '@angular/core';
 
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, { providers: [provideZonelessChangeDetection()] }).catch(console.error);

apps/01-hands-on-solution/src/app/material-design.module.ts

@@ -42,11 +42,6 @@
  *
  */
 
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */