Feature/angular 20 rework

.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/main.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/polyfills.ts

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

apps/01-hands-on-solution/src/test-setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';
+
+setupZonelessTestEnv();

apps/01-hands-on-solution/tsconfig.app.json

@@ -4,7 +4,8 @@
     "outDir": "../../dist/out-tsc",
     "types": [],
     "target": "ES2022",
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

apps/01-hands-on/project.json

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

apps/01-hands-on/readme.md

@@ -1,32 +1,31 @@
-# Exercice: 01:hands-on (dossier apps/01-hands-on)
+# Exercise: 01-hands-on (apps/01-hands-on directory)
 
-Le but de cet exercice est de comprendre comment fonctionne le bootstrapping d'une application angular
+The goal of this exercise is to understand how Angular application bootstrapping works.
 
-Actuellement si vous lancez, l'application une erreur va s'afficher dans l'inspecteur de votre navigateur.
+Currently, if you run the application, an error will appear in your browser's developer tools console.
 
-Cet exercice a pour but de corriger cette erreur :) 
+This exercise aims to fix this error :)
 
 <br>
 
-## Etape 1
+## Step 1
 
-Dans le dossier src/app, créez le composant AppComponent, ce composant doit posséder une properties name avec pour valeur votre prénom
+In the src/app directory, create the AppComponent component. This component should have a property called name with your first name as its value.
 <br><br>
 
-## Etape 2
+## Step 2
 
-Dans le fichier **app.module.ts** et particulièrement dans le tableau de la propriété **declarations** et **bootstrap** ajoutez le composant AppComponent
+In the **app.component.html** file, display the value of the **name** variable using the {{ name }} syntax, which is Angular's interpolation syntax.
 <br><br>
 
-## Etape 3
+## Step 3
 
-Dans le fichier, **app.component.html** affichez la valeur de la variable **name**, grâce à la syntax {{ name }} qui est la syntax de l'interpolation en Angular
-<br><br>
+In the **main.ts** file, bootstrap the AppComponent.
 
-## Etape 4
+## Step 4
 
-Vérifiez votre travail en vous plaçant à la racine du dossier workshop et en lançant la commande:
+Check your work by navigating to the workshop root directory and running the following command:
 
-```bash
+```shell
 npm run client -- 01-hands-on
 ```

apps/01-hands-on/src/main.ts

@@ -1,13 +1,8 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+enableProdMode();

apps/01-hands-on/src/polyfills.ts

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

apps/01-hands-on/src/test-setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();

apps/01-hands-on/tsconfig.app.json

@@ -4,7 +4,8 @@
     "outDir": "../../dist/out-tsc",
     "types": [],
     "target": "ES2022",
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

apps/02-ngg-solution/project.json

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

apps/02-ngg-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: [MatToolbarModule, MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   name = 'SFEIR - LUXEMBOURG';

apps/02-ngg-solution/src/app/feature/home/home.component.ts

@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'sfeir-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  standalone: false,
+  imports: [MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {
   name = 'Sfeir Luxembourg';

apps/02-ngg-solution/src/main.ts

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