The goal of this project is to update my Angular knowledge.

So, I used translations, validation, TDD, Server Side Rendering, Services and Shared Modules to build a numeric field.

1. Install the Angular CLI

• Open your terminal and type

  npm install -g @angular/cli

• Generate the application

  ng new my-app

2. If you use NVM

• Create a .nvmrc file at the root of the project

  node --version > .nvmrc

3. Switch the project to ESLint

• Install the eslint schematics

  ng add @angular-eslint/schematics

• Convert the tslint configuration to an eslint compliant

  ng generate @angular-eslint/schematics:convert-tslint-to-eslint my-app

• Remove the tslint.json configuration

  rm tslint.json

4. Install Prettier

• Install the required dependencies

  npm install -D prettier eslint-config-prettier

• Create prettier configuration file

  echo {} > .prettierrc.json

• Create prettier ignore file

  touch .prettierignore

  Its content looks like your .gitignore. For me, it's

  dist
  node_modules
  

• Extends .eslintrc.json configuration

  {
    // ...
    extends: [
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates",
    ],
    // ...
  }

  will become

  {
    // ...
    extends: [
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates",
      "prettier",
      "prettier/@typescript-eslint",
    ],
    // ...
  }

• Use husky and pretty-quick to format on VSC stage.

  npm install --save-dev pretty-quick husky

• Add the husky configuration inside the package.json

  {
    // ...
    husky: {
      hooks: {
        "pre-commit": "pretty-quick --staged",
      },
    },
  }

• Add prettier for linting and to format your files in package.json

  {
    // ...
    scripts: {
      // ...
      lint: "ng lint && prettier --check .",
      // ...
      format: "prettier --write .",
    },
    // ...
  }

5. Setup i18n

Here I'm using ngx-translate instead of the official i18n because this library can change the language of the application on the fly and use the JSON format. Plus, Ionic and other big frameworks use this library to translate Angular web apps. So it's worth learning it instead of the official one.

If you need to learn more about the differences between these two ones, check out: ngx-translate/core#495

• Install ngx-translate

  npm install @ngx-translate/core --save

• Install the loader to load translations

  npm install @ngx-translate/http-loader --save

• Set up a shared module to load translations and to use the translate pipe in each component

  mkdir -p src/app/shared
  touch src/app/shared/shared.module.ts

• Put the following content in it

  import { NgModule } from "@angular/core";
  
  import { HttpClient } from "@angular/common/http";
  import { CommonModule } from "@angular/common";
  import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
  import { TranslateHttpLoader } from "@ngx-translate/http-loader";
  
  export const createTranslateLoader = (http: HttpClient) =>
    new TranslateHttpLoader(http, "./assets/i18n/", ".json");
  
  @NgModule({
    imports: [
      CommonModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient],
        },
      }),
    ],
    exports: [CommonModule, TranslateModule],
  })
  export class SharedModule {}

• Create your JSON translation files in src/assets/i18n

  Example: you can create a fr.json or en.json

• Now you can import your SharedModule in each module of your application.

6. TDD

• Introduction

  To make TDD, we'll use Karma with Jasmine that are built-in with Angular. We have to add another library to test our translations in our components unit tests.

• Installation

  npm install -D ngx-translate-testing
  

• Setup configuration file of our unit test aka tsconfig.spec.json

  Add the type node in the types section to use node function like require

  {
    // ...
    compilerOptions: {
      outDir: "./out-tsc/spec",
      types: ["jasmine"],
    },
    // ...
  }

  will become

  {
    // ...
    compilerOptions: {
      outDir: "./out-tsc/spec",
      types: ["jasmine", "node"],
    },
    // ...
  }

• Now to use it in a test file aka *.spec.ts, you can check out: src/app/components/numeric-field/numeric-field.component.spec.ts with the TestBed.configureTestingModule

7. Server Side Rendering

• Install the required dependencies

  ng add @nguniversal/express-engine

• Now you can launch your Angular app with

  npm run dev:ssr

• Check out: https://angular.io/guide/universal for more information.

This project was generated with Angular CLI version 11.0.3.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.