Angular 5 -Complete guide to build SPA(Part 3)

Project Structure

When we create a project in angular using angular CLI, It creates the required project structure with all necessary components/files.

Please have a look at the sample project which i created -  Angular.Sample below.

node_modules

node_modules contains all the modules that are part of angular and it can be imported into the project as per need. 

src

src is the source folder which meant to keep the application files. It depends on developer how to organize files in this folder.

It contains an app folder where i am going to place the all the application files. I would like to add this with 5 folders to place components, services, model,pipes and any custom directive. Please refer below.

• component folder can be used to place all the components.
• service for app related services.
• model contains the model.
• directive can be used to place any utility components like alert component and 
• pipes are custom filters which can be used apply any transformation logic while data binding.

Again i would like to add that this folder structure depends on the developer how he wants to organize the files for better maintainability.

app.module.ts

app.module.ts contains application module. This application module class defines how different parts of your angular application fit together. We can define any number of modules based on the size of the application and how you want to separate your application into different modules. An angular application contains at least one module which is used to bootstrap the AppComponent and it helps to launch the application.

App module is decorated with NgModule and all the components/services/module which is configured in app module is available for entire application.

The above image is a sample app,module defined in angular app. All the new component which we create should be added to the declaration array.

Imports help you inject any dependencies to the application globally. Providers are used to inject the services.

Routing cofiguration using angular router is done through AppModule and it is imported into the imports array. We can discuss more about routing later.

environments

environments helps to add application configuration related to different deployment environments. This can related to a web.config file.

When creating a new project, it comes with 2 environment files. environment.ts for development and environment.prod.ts for production.

Developer has the freedom to add any number of environments. I would like to add one more environment file environment.qa.ts which will be used for my testing environment.

This how my  environment folder looks like now.

After adding a new environment, same should be added to environment array in .angular-cli.json which is the configuration file for entire angular application. Please refer below.

"environments": {
"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts",

"qa": "environments/environment.qa.ts"

}

When we are building the angular application, we can give the environment name in build command so that it takes the related environment configuration from environment file.

Please refer below example on building the angular app with qa environment file which we added above.

ng build -qa (or) ng build --environment=qa

favicon.ico

favicon.ico is the icon which will be used for the angular application

index.html

index.html is main html file which gets loaded into the browser when running an angular application. All the other components gets loaded inside the <app-root></app-root> based bootstrapped module. By default, AppComponent gets loaded and it can be changed in AppModule.

main.ts

main.ts contains the configuration like what is the app module and what are the available environments for the application to work on. This is starting point of execution and the actual bootstrapping happens here.

pollyfills.ts

This file contains all the polyfills required by angular and this loaded before the app. Angular might not work properly on the older versions of browsers or it may work differently. To solve this issue, developer can include the pollyfills required based on the browser version from this file.

styles.css

This file can be used place any css styles that applies globally to entire angular application.

.angular-cli.json

.angular-cli.json is the json configuration file related to the angular project. This helps you configure everything related to the app starting name of the project to build-ouput folder.

There are other files also in the project related to testing the angular app.

We will be discussing about angular routing which is the core of  SPA in the next blog.