feat: update angular version to v17

[DevSallSa]

TL;DR

• Update Angular to v17
• Replace the deprecated packages with maintained alternatives
• Configure ESLint and prettier
• Refactor code to comply with ESLint and prettier rules
• Fix GitHub Actions job order to resolve lint failure Upgrading to Angular 17 brokes lint command #222.

Context

Based on @OlivierAlbertini ’s PR (#221),
I updated the Angular version to v17 and fixed the following issue: #222.

The lint error was caused by several factors :

• use of deprecated library : villedemontreal/lint-config which is incompatible with current ESLint version
  • use of deprecated/outdated ESLint rules
  • missing ESLint plugin
• Version mismatch between eslint, typescript-eslint and angular-eslint packages
• Incorrect execution order of GitHub Actions jobs (see next paragraph)

Explanation

The Lint job failed because it ran before the build job in GitHub Actions.
The Storybook sub-project depends on the built version of angular-ui and without it, TypeScript cannot resolve certain imports.

For example, the following code will fail during linting:

// content of a storyfile
import { BaoBreadcrumbComponent, BaoHeaderInfoComponent, BaoHeaderInfoModule } from 'angular-ui';

with the following error in GitHub Actions :

/home/runner/work/angular-ui/angular-ui/projects/storybook-angular/src/stories/Header/Header-info.stories.ts
Error:   40:3  error    'BaoHeaderInfoComponent' is an 'error' type that acts as 'any' and overrides all other types in this intersection type      @typescript-eslint/no-redundant-type-constituents

As angular-ui is developed inside this project, it doesn't appear in package.json nor in node_modules.
In that case, Typescript will look in the dist/ folder to find the lib. These types are only available after the build step, as they reside in the dist/ folder but currently as the lint command is ran before the build command, the dist/ folder does not exist.

Step to reproduce in local

1. Install dependencies : npm ci
2. Make sure the dist/ folder doesn't exist in the root folder. Delete it otherwise
3. run npm run lint => The error will occurred
4. run npm run build && npm run lint => the lint will pass without error (only warnings)

Why now ?

Because of eslint, typescript-eslint and angular-eslint versions supported by Angular v17 which may include breaking changes or enforce stricter best practices.

The solution

To resolve this, we can either :

• Run the lint command after running the build step

# build-node.yml
- run: npm run build
- run: npm run lint

Or

• Change all imports to point to the source code.

// before
import { BaoBreadcrumbComponent, BaoHeaderInfoComponent, BaoHeaderInfoModule } from 'angular-ui';

// after
import { BaoBreadcrumbComponent, BaoHeaderInfoComponent, BaoHeaderInfoModule } from 'projects/angular-ui/src/public-api';

This PR implements the first solution to minimize code changes.

[DevSallSa]

Hi @OlivierAlbertini,

I've done the changing that you asked in PR #248
I closed the previous PR because it's better to make this PR from my feature branch

[OlivierAlbertini]

Can you run npm run chromatic this will trigger storybook on this build in order to review visually.

[OlivierAlbertini]

GG