Yet Another Angular Article, Part 3 : configurations and environments

In my previous article, we learnt how to generate a component. Before going forward, i think that we should have a look at various notions about configurations and environments.

There is different king of configuration : Angular behavior and typescript compiler. Today we will have a look at the Angular part, and it’s all in angular.json project.

This file describe all your project, and follow a schema from Angular CLI : /@angular/cli/lib/config/schema.json

The ‘projects’ is the main part. And in this one, you will see ‘schematics’ and ‘architect’.

Architect describe the behaviors of the CLI : build, serve, test, …

Schematics describe how to generate code. And this is what we will do today.

Here is mine after the first article :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

We can see that it contains ‘scss’ for the style key. This is because, when i created the project, i answered ‘scss’ to the cli prompt.

But i want to do more. Ususally i prefer to build component with Single File Component pattern. This is like VueJS does. Your styles, html and typescript code in one file. This is because it forces you to build little component.
To do that, add those lines : inlineStyle and inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Now when you will run ng generate component my-new-component it will create only the typescript file.

We will continue with some optimizations. Best practices explain that you should always set your Change Detection to ‘OnPush’. So, it should be done during component generation.
To do that, add this line : changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

That’s it, you now have setup your default project code generation.

In previous Angular version, you were able to define “standalone: true”. But it’s now the default behavior.

I will end with Envinronment concept. When you are building application, you usually depends on APIs. These Apis may be served locally (on your computer when you are writing code) but can be served by test-server, pre-production server, or production server.
So you have to set the hostname in a variable.

Angular bring a kind solution for this : environment.

ng generate environments

This command will adds 2 new files in your project : environment.ts and environment.development.ts
And it will also modify your angular.json by adding a ‘fileReplacements’ array in the node ‘projects.my-new-project.architect.configurations.development’

During the build process, it replaces the required environment.ts by the required environment file (environment.development.ts for example).

You can store all specific environment variablse inside and import the environment.ts everywhere you need it. But take care to not import other environement.*.ts because they won’t be available at runtime !

Here is a sample of environment :

export const environment = {
  production: false,
  calendarApi: {
    host: https://localhost:5000/api/v1,
  }
};

So you just have to create a new ‘environment.production.ts’ with required variables inside. Then, alter the angular.json to add the fileReplacements section under ‘project.architect.configurations.production’ like this :

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.production.ts"
  }
]

To my mind, Angular should have create both development and production files. That’s a bit strange.

Ho, i have forgot to say that in Angular v19, you can define global variable at startup. This might be an alernative to environment concept but it requires more setup on build process.

Have a nice day ☁️

[note] All articles use command from Angular v19*