Update tooling and first steps chapters to Angular 20

Author: Ocunidee

docs/src/.vuepress/public/eslint.txt

@@ -14,10 +14,10 @@ module.exports = tseslint.config(
     ],
     processor: angular.processInlineTemplates,
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: "module",
       parserOptions: {
-        project: ["tsconfig.json", "e2e/tsconfig.json"],
+        project: ["tsconfig.app.json", "tsconfig.spec.json"],
         createDefaultProgram: true,
         ecmaFeatures: {
           modules: true,

docs/src/first-steps/README.md

@@ -50,75 +50,116 @@ The `src` folder contains:
 The `app` folder contains:
 - `app.config.ts`: Defines the application configuration that tells Angular how to assemble the application.
 - `app.routes.ts`: Defines the application's routing configuration
-- `app.component.html`: Defines the HTML template associated with the root `AppComponent`
-- `app.component.scss`: Defines the base stylesheet for the root `AppComponent`
-- `app.component.ts`: Defines the logic for the app's root component, named `AppComponent`. The view associated with this root component is the root of the view hierarchy.
-- `app.component.spec.ts`: Defines a unit test for the root `AppComponent`
+- `app.html`: Defines the HTML template associated with the root `App` component.
+- `app.scss`: Defines the base stylesheet for the root `App` component.
+- `app.ts`: Defines the logic for the app's root component, named `App`. The view associated with this root component is the root of the view hierarchy.
+- `app.spec.ts`: Defines a unit test for the root `App` component.
 
 
 ## Text interpolation in templates
 
-Like any other component, the shell AppComponent is distributed over three files.
-Open the component class file (`app.component.ts`) and change the value of the title property to 'Search films'
+Like any other component, the shell `App` component is distributed over three files.
+Open the component typescript file (`app.ts`) and change the value of the title property to 'Search films'
 
 ```typescript
 // app.component.ts
 import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  templateUrl: './app.html',
+  styleUrls: ['./app.scss']
 })
-export class AppComponent {
-  title = 'Search Films'
+export class App {
+  protected readonly title = signal('Search Films')
 }
 ```
 
-Open the component template file (`app.component.html`) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.
+Open the component template file (`app.html`) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.
 ```html
-<!-- app.component.html -->
-<h1>{{title}}</h1>
+<!-- app.html -->
+<h1>{{title()}}</h1>
 ```
 The double curly braces are Angular's *interpolation binding syntax*. This interpolation binding presents the component's title property value inside the HTML header tag.
 
 The browser refreshes and displays the new application title.
 
-The simplest way to insert data dynamically into your components is through text interpolation, using the `{{myVariable}}` syntax. Inside double curly braces, you can specify any valid JavaScript expression that don't have or promote side-effects.
+The simplest way to insert data dynamically into your components is through text interpolation, using the `{{myVariable}}` syntax. Inside double curly braces, you can specify any valid JavaScript expression except for:
 
-JavaScript expressions that have or promote side effects include:
-- assignements (`=`, `+=`, ...)
-- operators such as `new`, `typeof` or `instanceof`
-- increment and decrement operators `++` and `--`
+- bitwise operators: `&`, `&=`, `~`, `|=`, `^=`, etc.
+- object destructuring: `const { name } = person`
+- array destructuring: `const [firstItem] = items`
+- comma operator: `x = (x++, x)`
+- instanceof: `movie instanceof Film`
+- new: `new Film()`
+- regex
+- declarations
 
-Add two fields after the title variable in the `app.component.ts` file:
+Add two fields after the title variable in the `app.ts` file:
 ```typescript
-// app.component.ts
-title = 'Search Films'
-orderReference = 'ABCXYZ'
-price = 17.3
+// app.ts
+protected readonly title = signal('Search Films')
+protected readonly orderReference = signal('ABCXYZ')
+protected readonly price = signal(17.3)
 ```
 
 In the template:
 ```html
-<!--app.component.html-->
-<h1>{{title}}</h1>
-<p>Order ref. {{ orderReference }} - Total: {{ price.toFixed(2) + "€" }}</p>
+<!--app.html-->
+<h1>{{title()}}</h1>
+<p>Order ref. {{ orderReference() }} - Total: {{ price().toFixed(2) + "€" }}</p>
 ```
 
-The template has access to all the non-private members of the component class. Changing the visibility of `price` to `private` will render this error: *Property 'price' is private and only accessible within class 'AppComponent'.*
+The template has access to all the non-private members of the component class. Changing the visibility of `price` to `private` will render this error: *Property 'price' is private and only accessible within class 'App'.*
 
-Interpolation only works on textual content of elements. You can not use it to change the value of HTML attributes or to insert HTML code. For this, you will need to resort to directives, which we will see later in the training.
+Interpolation only works on textual content of elements. You should not use it to change the value of HTML attributes and can't use it to insert HTML code. For this, we will see strategies later in the training.
 
 In this example, we formatted the price manually. We will later see that Angular provides a way to declare reusable formatters: **pipes**.
 
 
 ## Working with components
 
-The `AppComponent` is only the root component of an Angular application. A web application is made of small reusable components, embedded in higher level components to form the layout, the arrangement of your elements on the page. This structure can be described as a component tree. Angular creates, updates, and destroys components as the user moves through the application. The app can take action at each moment in this lifecycle through optional lifecycle hooks, like `ngOnInit()`.
+The `App` component is only the root component of an Angular application. A web application is made of small reusable components, embedded in higher level components to form the layout, the arrangement of your elements on the page. This structure can be described as a component tree. Angular creates, updates, and destroys components as the user moves through the application. The app can take action at each moment in this lifecycle through optional lifecycle hooks, like `ngOnInit()`.
 
 ![Component tree](../assets/tree.png)
 
+Before generating a second component, let's configure the naming convention of components and other key building blocks of an Angular app. Since Angular 20, the type of building block (component, service, directive) generated is not automatically appended to the file name and class name. That gives more flexibility to teams in their naming choices, however it can easily lead to naming clashs where the component, the service and the DTO have exactly the same class name for instance. This is why we will add the following configuration to the `angular.json` file to restore the appending of the building block name to the class name and file name.
+
+```json{7-32}
+// angular.json
+  "cli": {
+    "schematicCollections": [
+      "angular-eslint"
+    ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+```
+
 Let's create a second component. It is advised to generate components using the [Angular CLI](https://angular.dev/cli/generate#component).
 
 ```bash
@@ -128,7 +169,7 @@ ng g c child #shorthand for ng generate component child
 The `ng g c` command added a `child` folder containing the `ChildComponent` files in the `app` folder.
 
 ```typescript
-// child.component.ts
+// child.ts
 import { Component } from '@angular/core'
 
 @Component({
@@ -142,30 +183,30 @@ export class ChildComponent {
 }
 ```
 
-To link the components together, the child components are declared in their parent's component template, using their selector as a tag. The child component also needs to be added to the `imports` array of the parent component decorator. A component can be reused as many times as desired. The `ChildComponent`'s selector is `app-child`. Including this component as a child to the `AppComponent` is done as follows:
+To link the components together, the child components are declared in their parent's component template, using their selector as a tag. The child component also needs to be added to the `imports` array of the parent component decorator. A component can be reused as many times as desired. The `ChildComponent`'s selector is `app-child`. Including this component as a child to the `App` component is done as follows:
 
 <CodeGroup>
-<CodeGroupItem title="app.component.html">
+<CodeGroupItem title="app.html">
 
 ```html
-<h1>{{title}}</h1>
+<h1>{{title()}}</h1>
 <app-child></app-child>
 ```
 </CodeGroupItem>
-<CodeGroupItem title="app.component.ts">
+<CodeGroupItem title="app.ts">
 
 ```ts{2,6}
-import { Component } from '@angular/core'
+import { Component, signal } from '@angular/core'
 import { ChildComponent } from './child/child.component'
 
 @Component({
   selector: 'app-root',
   imports: [ChildComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
 })
 export class AppComponent {
-  title = 'Search Films'
+  protected readonly title = signal('Search Films')
 }
 ```
 </CodeGroupItem>
@@ -221,15 +262,18 @@ Here is the folder structure we will strive to achieve in the Search Films appli
 <!-- TODO replace image-->
 ![Simple folder structure](../assets/folder-structure.png)
 
-This folder structure is best suited to simple projects with only one main feature that has its routes defined in one place, the `app-route.ts` file. As a project grows, feature folders and routes will be introduced and the structure can evolve to this:
+This folder structure is best suited to simple projects with only one main feature that has its routes defined in one place, the `app.route.ts` file. As a project grows, feature folders and routes will be introduced and the structure can evolve to this:
 
+<!-- TODO replace image -->
 ![Multi feature folder structure](../assets/folder-structure-multi-module.png)
 
+The Angular team provides a [style guide](https://angular.dev/style-guide) where they advise to follow such a structure instead of the first one. When in doubt, refer to it.
+
 :::tip
 By default, the CLI will always generate in the `app` folder. You can tell it to generate in another folder by passing the path before the name of the element you want it to generate. For instance `ng generate component components/dashboard` will generate the `DashboardComponent` 4 files in `app/components/dashboard`. The `components` folder is created by the CLI if it doesn't already exist, as well as the `dashboard` folder.
 :::
 
-As the complexity of the folder structure of the application increases, it is a good practice to add aliases in the `tsconfig.json` file. Let's do it now to avoid a tedious refactoring later:
+<!-- As the complexity of the folder structure of the application increases, it is a good practice to add aliases in the `tsconfig.json` file. Let's do it now to avoid a tedious refactoring later:
 ```json
 "compilerOptions": {
   //...
@@ -243,16 +287,16 @@ As the complexity of the folder structure of the application increases, it is a
   }
 }
 ```
-VsCode will automatically use those paths for the imports instead of relative ones that can be tough to read or maintain.
+VsCode will automatically use those paths for the imports instead of relative ones that can be tough to read or maintain. -->
 
 
 ## Practical work: Your first component
 
-1. If you created the `child` component, delete it as we won't need it moving forward and remove any reference to it in the `AppComponent`. You may get an error in the console where you launched the project once you delete the child component, in that case restart the project.
+1. If you created the `app-child` component, delete it as we won't need it moving forward and remove any reference to it in the `App` component. You may get an error in the console where you launched the project once you delete the child component, in that case restart the project.
 
 2. Most apps strive for a consistent look across the application. The CLI generated an empty `styles.scss` file for this purpose. Copy paste the content of the SCSS stylesheet that will serve as basis for all the practical work, downloadable here: [styles.scss](https://worldline.github.io/angular-training/styles.scss) in it.
 
-3. Create a new component login-form containing the following authentication form (don't forget to generate it in the *components* folder):
+3. Create a new component `login-form` containing the following authentication form (don't forget to generate it in the *components* folder):
 ```html
 <form id="login-form">
   <h1>Authentication</h1>
@@ -269,9 +313,9 @@ VsCode will automatically use those paths for the imports instead of relative on
 
 ```
 
-4. Delete the existing content of the `AppComponent` template (html file of the component) if it is not already done and the variables declared in the `AppComponent` class. Display the `LoginFormComponent` in the `AppComponent` by addding `<app-login-form></app-login-form>` in its template. Don't forget to add the `LoginFormComponent` class to the `imports` array of the @Component definition of the `AppComponent`.
+4. Delete the existing content of the `App` component template (html file of the component) if it is not already done and the variables declared in the `App` class. Display the `LoginFormComponent` in the `App` component by addding `<app-login-form></app-login-form>` in its template. Don't forget to add the `LoginFormComponent` class to the `imports` array of the @Component definition of the `App` class (if you used VSCode aucompletion to add the new component to the App component template, then it should be added automatically).
 
-5. Complete the `login-form.component.ts` file: add a field `title = 'Authentication'`. Then, use text interpolation in the template to pass the title from the component ts file to the h1 tag.
+5. Complete the `login-form.ts` file: add a field `protected readonly title = signal('Authentication')`. Then, use text interpolation in the template to pass the title from the component ts file to the h1 tag. Don't forget that you need to invoke a signal to read its value.
 
 6. Don't forget to commit