Frontend

Angular

Angular is a popular open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS, its predecessor.

This project use Angular 17.

Learn more about Angular

Prerequisites

Follow the instruction to create a dev container: Developing inside a Container

Add Angular to Dev Container

In the directory .devcontainer add a new file named postCreateCommand.sh within the following:

#!/usr/bin/env bash

sudo npm install -g npm@latest @angular/cli
echo "source <(ng completion script)" >> /home/node/.bashrc

yarn install

The file postCreateCommand.sh must be executable. Run the following command:

chmod +x .devcontainer/postCreateCommand.sh
git update-index --chmod=+x .devcontainer/postCreateCommand.sh

Edit the file devcontainer.json and change the line beginning with "postCreateCommand": for the following:

"postCreateCommand": "./.devcontainer/postCreateCommand.sh",

Add Visual Studio Code Extensions to Dev Container

In the Dev Container file, you can add Visual Studio Code extensions. For example:

{
  ...
    "customizations": {
    "vscode": {
      "extensions": [
        "Angular.ng-template",    // Angular helper
        "dbaeumer.vscode-eslint", // Code formatter
        "ms-vscode.live-server"   // HTML file processing for End-to-end report
      ]
    }
  }
}

Rebuild the container to apply the modification. Learn more about Rebuild Dev Container

Post project creation

Generate Environments files

To generate default environements files, execute the following command:

ng generate environments

Learn more about Angular - Configuring application environments

End-to-end test preparation

Angular include Karma to do end-to-end tests. To make works with Dev Container, it’s require some preparation.

Karma looking for a web browser to run the tests. It can connect with your local browser even running inside the Dev Container but still try to find the browser process. To fix that, we just have to remove the browser configuration.

Once the new project created, modify the karma’s configuration generated with the following command:

ng generate config karma

In the karma.conf.js file, comment out the line browser like the following:

...
    reporters: ['progress', 'kjhtml'],
    // browsers: ['Chrome'],
    restartOnFileChange: true
...

ESLint

ESLint is a popular static code analysis tool used in software development for identifying problematic patterns or code that doesn’t adhere to certain style guidelines.

Install the @angular-eslint/schematics package with the following command:
```
ng add @angular-eslint/schematics
```

As web use Webpack, we need to modify the configuration file. Open the file .eslintrc.json and do the following modifications:

...
  "root": true,
  "parserOptions": {
 "ecmaVersion": "latest",
 "sourceType": "module"
  },
  "ignorePatterns": [
 "projects/**/*"
  ],
...

That may not the best solution. However, that workarround works.