Setting up Enterprise Angular Applications (AngularInDepth)

When we think of web application these days, there are few framework that comes in mind like Angular, React, Vue etc. After choosing the framework (for this article we will go with Angular) the next question comes in mind is what should be the structure of the application. Yes we do have basic guideline available in Angular documentation but while developing an enterprise application we need something more.

In this article we would explore simple folder structures and few reusable components to setup a boilerplate code for enterprise applications.

What will we cover ?

We will setup below functionalities as part of this article:

1. Angular basic setup with Folder structure — Basic angular configuration and folder setup
2. Document generator — Compodoc setup for document generation
3. Mutation test setup — Stryker setup for mutation testing
4. Duplication test setup — JSCPD for duplication identification setup
5. Http Request Service — To handle all http request (abstraction for frequent handler change) and setting up common header items
6. Error handling interceptor — To handle all Http errors and setup retries
7. API prefix interceptor — To handle CORS calls and redirecting it to a particular base URL to switch between multiple rest clients
8. Common logger — To handle all loggings using common logic for the project avoiding console.log
9. Common loader — Common loader for whole application using interceptor
10. Until destroy — RxJS operator that unsubscribe from observables on destroy to avoid leaks
11. Route reusable strategy — A route strategy allowing for explicit route reuse

Lets get started.

Setup angular application using CLI

Install NodeJS version > 12

Angular CLI (npm install -g @angular/cli)

Create new Angular Application

ng new angular-basics

Install compodoc for angular documentation

npm install -g @compodoc/compodoc

Install JSCPD for duplication check setup

npm install -g jscpd

Install stryker for mutation testing setup

npm install -g stryker-cli

Post installing all the required dependencies listed above. You need to install node module dependencies by running the command npm install from root folder.

Once done to run the application you have to run ng serve for a dev server and watch for your changes in your favorite IDE. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Want to read this story later? Save it in Journal.

Basic setup of folder structure:

core module — common functionalities for whole application

shared module — reusable functionalities for application

functional module — specific functionalities in the application

Core Module:

Common functionalities for whole application

1. Http request service: This is a abstraction service between httpClient and our application. It helps in changing any global configurations without changing the application logic. This also helps in setting http headers for all requests (used in authentication)

2. Error handling interceptor — This interceptor will intercept all server sent errors and will setup retries for the same (take(2)). This will also log all error into configured log using logger. This helps in effective debugging of the application for errors and having a global retry mechanism.

3. API prefix interceptor —This interceptor will intercept all request without http[s] and update environment.serverURL (as base url). This helps in switching between different rest servers.

4. common logger — To handle all loggings using common logic for the project. This logger will log 4 different log levels and can be customized to log based on flags. It can also be customized on the environment for when & where the logging should happen. This is a great help for debugging and eliminating console.log in prod build.

5. until-destroy — This helps in unsubscribing observables on destroy. This helps in preventing leaks with intermediate operator chain.

6. route-reusable-strategy — This is very useful in reusing a given route.

Shared Module:

reusable functionalities in the application

1. loader interceptor — The loader interceptor helps in identifying all http requests and adding a common loader for the same. This can count the number of request made and switch-off loader once all responses are received.

Functional Module:

This module is to hold specific functionality components and modules depending on the project (core business section)

Please find the whole code base at githup. Thankyou !!

If you liked this article, please 👏 below, so that other people can find it! 😊

📝 Save this story in Journal.