Angular Project Orchestration

Creating a new Angular project

• Important: Please do not skip steps when creating a new Angular project

Generate project

• When creating a new project always use the Angular CLI tool (ng)
  • if already installed verify that it is in version ^8.2.x with ng -v (from angular ^9.x, ng v has to be used instead)
• generate a new project with ng new {{customer-project}} --style=scss --prefix={{prefix}} --routing=true
  • {{customer-project}} is pair of customer name and project name, for example: kvasar-permweb, kiwi-kapla or flowup-web
    • sometimes there needs to be added a frontend suffix like customer-project-fe
  • --style=scss will set default style to SCSS
  • {{prefix}} will represent application prefix, in most of the existing projects we have the default app prefix, however, the best prefix is something that will identify projects components (name of the project or customer, alternatively a combination of customer and project initials)

First steps after generating a new project

• run npm audit fix --all to audit and update packages with vulnerabilities
• run npm install @angular/language-service --save-dev to activate Angular language service support in WebStorm (or other supported IDE)
• copypaste these additional useful files to the project's root

Angular CLI configuration

add the following to angular.json's architect.build.options property:

      "stylePreprocessorOptions": {
        "includePaths": [
          "src"
        ]
      },

• thanks to including paths "." you should be able to import SCSS files with relative pathnames

@import 'variables'; // style located at src/
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; // style from node_modules

Default style reset

put this style to your style.scss in src

/** WARNING: Do NOT import this file in any component style */

html,
body {
  height: 100%;
}

body {
  line-height: 1;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

/* stylelint-disable-next-line selector-max-type */
input,
button {
  border: none;
  background: none;
}

TS Lint immutable

• run npm install tslint-immutable --save-dev to install tslint-immutable

RxJS TS Lint

• run npm i --save-dev rxjs-tslint

TS Lint

put tslint.json into the project root

• run ng lint --fix or ng-lint {{project-source-code}} --fix if it fails because of multiple projects (e2e)

note do not forget to change the component prefix rule to match the project

note you might need to resolve some errors in generated files, these are some of them:

Click to expand!

• methods return types in app.po.ts

import { browser, by, element } from 'protractor';
import { promise as wdpromise } from 'selenium-webdriver';

export class /* CLI generated class name */ {
  navigateTo(): wdpromise.Promise<any> {
    return browser.get('/');
  }

  getParagraphText(): Promise<string> {
    return element(by.css(/* css selector (for example 'app-root h1') */)).getText();
  }
}

• karma loaded function in test.ts

declare const __karma__: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function(): any {
  /* useless but needed comment */
};

• rewrite console.log to console.info

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.info(err));

TS Config

• add compiler option to tsconfig.json in project's root

  "compilerOptions": {
      ...
    "forceConsistentCasingInFileNames": true,
    "newLine": "LF",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
      ...
  }

Style lint

put .stylelintrc.json into the project root for "stylelint": "^8.2.0"

run npm install stylelint --save-dev add this line in package.json

HTML lint

For basic HTML linting add .htmlhintrc into the project root, run npm install htmlhint --save-dev and add the following line to package.json:

Adjust the "lint" script to run all necessary linters

    "lint": "npm run lint:ts && npm run lint:html && npm run lint:scss",
    "lint:ts": "npx ng lint",
    "lint:html": "npx htmlhint 'src/**/*.html'",
    "lint:scss": "npx stylelint 'src/**/*.scss'",

Prettier

Add Prettier as described here

GIT hooks

• Integrate this collection of useful GIT hooks Angular GIT hooks

Additional schematics

Add this in angular.json to the schematics inside the @schematics/angular:component

"changeDetection": "OnPush",

NGRX store, effect, tools

• if project will use NGRX for state management, run ng add @ngrx/store, ng add @ngrx/store-devtools, ng add @ngrx/effects, ng add @ngrx/entity. Adding entity might show error about not supporting schematics, it is not a problem.

Material design

• if the project will use material design, run ng add @angular/material