Browsed by
Category: Uncategorized

Configure environments in Angular

Configure environments in Angular

In this post, I am going to discuss about configuring environment settings in a angular application using angular-cli. The solution was tested only in version 7.

Create a new angular project using the following command. ng new env-demo

Let us assume that we are having three different databases for dev, uat and production. Locate the environments folder. You will see two files
a) environment.ts – settings for the development environment.
b) environment.prod.ts – settings for the production environment.

Add one more file environment.uat.ts in the environments folder. The filename suffix uat and the environment name should match. Our new environment is uat.

Add a setting named dbUrl in all the environments and have a different values for each environment.

The environment settings are configured in the angular.json file. There is a section called configurations which currently has one value for production. It looks like the

Create one more section in the configurations section called uat which looks like following.

To test the settings, let us use the settings in the app component. Import the environment module in the app component. You have to refer only the environment.ts file.
import { environment } from '../environments/environment';
The angular compiler will do the transformation for you.

The complete code snippet for the angular.component.ts file is pasted below

When you run the command ng build -c uat the angular compiler will correctly transfer the settings in the uat environment to the environment.ts file.

There is one more thing that we need to do if we want to test this using the ng serve command. Locate the section serve in the angular.json file and add the section uat in the configurations section which is nested under serve section.

Now when you run the command ng serve -c uat the correct value of the dbUrl settings will be available in the app component.

Setting up TypeScript in Visual Studio Code.

Setting up TypeScript in Visual Studio Code.

Install Node

NodeJS is a server side JavaScript framework but also used in a lot of frontend technologies as a package manager for various js plugins.
Whether you are a JavaScript developer or not, you must learn the basic of nodejs.
You can install nodejs from nodejs.org

After installing node, verify it by going to the command line and run these commannds.

you should get the version numbers for both the commands.

Install TypeScript

TypeScript can be installed in multiple ways
1. From npmjs.org
2. From typescriptlang.org
3. For Visual Studio users, You can download it from here

g – global.

Download Visual Studio Code

Visual Studio Code can be downloaded from code.visualstudio.com

Configure Visual Studio Code

The root folder of the project should have these following files

1. package.json

Used by the npm package manager to download all the dependencies and run other startup scripts.

2. tsconfig.json

Used by the typescript compiler for compiling your typescript files. This file containes the various options that the compiler uses.
If nothing is specified, it will use the default options. A few options of tsconfig.json is listed below.

Complete list of typescript compiler options can be found here


TypeScript declaration files

In a typical JavaScript project, it is very common to use third party JavaScript frameworks like JQuery, Angular, React etc. If we have to use the code by using the variables
like $ or angular, TypeScript will show compiler errors like,
cannot find name '$'. For TypeScript, this is like a global variables and this should be fixed.
To fix this issue, there is a file called declaration file which has a extension *.d.ts which is usually developed by the framework developer. It is like a JSDOC for TypeScript compiler which checks whether the function or variable is declared before it is used at compile time and also gives the tooling support for developer by giving the intellisense options for the third party libraries.

For example, to install the declaration file for JQuery, the following command should be executed.

npm install --save-dev @types/jquery

To search for the declaration file for your third party js file, check this link. microsoft.github.io.


Compiling TypeScript files.

TypeScript files can be compiled by executing the following command tsc. The compiler will compile all the typescript files in the project including the node_modules folder. To fix this issue, an option has to be added to the tsconfig.json file. "exclude": ["node_modules"].

Running TypeScript compiler in watch mode.

To run the compiler in watch mode, use the following command. tsc -w.


Summary

In this post, I have covered the basic configuration needed to get started with TypeScript with Visual Studio Code.

Resources

  1. Visual Studio Code
  2. microsoft.github.io.
  3. typescriptlang.org – Offcial TypeScript page.
  4. TS lint source for tslint.json
  5. TypeScript compiler options for tsconfig.json