All your project configuration in a single article

Starting a new project can be confusing as you need a lot of different setups, so I decided to gather all the configuration that you will need in one simple 6 steps guide .

In this article I will demostratie all the necessary setup that you will need when creating a new Angular project :

1. Setting the project as a workspace, great for code sharing and common settings accross multiple applications.
2. Using a custom Angular library in our Angular project.
3. Some custom configuration for Karma & Jasmine unit testing.
4. Setting a pre-commit hook to lint our stages files with ESLint + prettier.
5. Setting alias path with Typescript.
6. Setting up multiple environments for : local, staging, production + Injecting process.env variables into our project.

1. Workspace :

A workspace is very convenient way to manage multiple applications, one of benefits is having one package.json for managing your projects dependencies.

Create an empty workspace:

ng new my-workspace --create-application false

Create an empty application in the workspace.

cd my-workspace
ng g application my-app --prefix ma --style scss --routing

This will create a new application with SCSS styling and routing.

// angular.json
{
  //...
  "my-app": {
      "projectType": "application",
      "schematics": {
          "@schematics/angular:component": {
              "style": "scss",
              "changeDetection": "OnPush"
          }
      },
   }
}

The above will change the default change detection to “onPush” inyour application.

2. Library :

Library makes it easy to place all the common code for your applications, such as : services, components, directives, pipes … etc.

I prefer using a library than a core module because you can publish it and make it available for other developers in your company, which often have the same core usage as you.

This article is nice guide for creating one : https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11.

If you are not inserted on publishing your library to npm, you can use the following to consume it:

//package.json
....
"optionalDependencies": {
  "my-app": "file:dist/my-app"
}

I also recommend adding a watch script for the library so it will rebuild on every code change, run following npm script in a separate terminal tab.

///package.json
...
"build": "ng build my-lib --watch",

3. Unit Testing :

Angular comes out of the box with unit testing configuration but you can add some settings to make your life a bit easier.

Add the following script :

//package.json
...
scripts: {
"unit-test:my-app:code-coverage": "ng test --project=my-app --code-coverage --reporters=spec",
    "unit-test:my-app": "ng test --project=my-app  --reporters=spec,kjhtml"
}

Using flag “code-coverage” generates a index.html that shows you a breakdown of all your coverage per component / service.

This is my config file:

You will need to install all the plugins. (JUnit is for CI pipeline)

Also this will open chrome in a full screen with dev tools opened.

4. Pre-Commits :

We will make a pre commit hook that will run ESLint + Prettier on every commit.

Install ESlint:

npm install --save -dev eslint

Config file: (you will need to install all the extends if you use this)

Install husky:
npm install --save -dev husky
npm install --save -dev lint-staged

Add the following scripts and config :

/package.json
...
"scripts": {
    "lint:my-app": "ng lint --fix --project=my-app",
    "lint:my-lib": "ng lint --fix --project=my-lib",
    ...
}
...
"husky": {
  "hooks": {
      "pre-commit": "lint-staged --relative"
    }
},
"lint-staged": {
   "*.{js,ts}": [
      "eslint --fix"
   ],
   "*.{html,scss}": [
      "prettier --write"
   ]
},

Prettier config:

5. Path Alias :

Defining path alias make it easy to move files around in your project, also the import path looks a lot nicer.

//tsconfig.json
...
"paths": {
   "@environments/*": ["projects/my-app/src/environments/*"],
   "@pages/*": ["projects/my-app/src/app/pages/*"],
   "my-lib": ["dist/my-lib"]  
}

6. Multiple Environments:

Setting up multiple environments such as : production, staging and local. Also, I will show how you can support process env variables such as CI build number to be available in your project.

Create the following files under my-app/environments:

Create a script under root directory:

Change Angular.json:

//angular.json
"projects": {
    "my-lib": {
      ...
    },
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "staging": {
              "fileReplacements": [
                {
                  "replace": "projects/my-app/src/environments/environment.ts",
                  "with": "projects/my-app/src/environments/environment.staging.ts"
                }
              ],
              ...
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/my-app/src/environments/environment.ts",
                  "with": "projects/my-app/src/environments/environment.production.ts"
                }
              ],
              ....
            }
       ...
}

Finally add to your package.json:

//package.json
...
scripts: {
...
"build-dynamic-env": "ts-node -O '{\"module\": \"commonjs\"}' ./generate-dynamic-env.ts",
"build:production": "npm run build-dynamic-env && ng build --project=my-app --configuration=production",
    "build:staging": "npm run build-dynamic-env && ng build --project=my-app --configuration=staging",
}

Thanks for reading! If you got any question let me know in the comments.