Understand angular 16 directory structure

Understand angular 16 directory structure

This article will let us understand angular 16 directory structure. Here we are explaining directory structure for angular 16.

Look at the image below which is fresh installed directory structure for angular 16 project named “myNewApp”

Understand angular 16 directory structure

Let’s understand everything step by step.

1) .angular

In previous versions of angular this folder was not there. It introduced to use cache in our development. Caching is enabled by default in angular for the development environment. That’s why you can see the .angular folder in the project root and of course it does not need to add in repo.

Understand angular 16 directory structure

Caching is by default enabled. We can enable/disable using following commands

// To disable
ng config cli.cache.enabled false

// To enable
ng config cli.cache.enabled false

By default, disk cache is only enabled for local environments.

To enable caching for all environments, run the following command:

ng config cli.cache.environment all

2) .vscode

This folder is used to have visual code editor project workspace setting for development. There is no such important role of this.

Understand angular 16 directory structure

3) node_modules

This folder contains the packages / libraries which are installed into your application when you created a project in angular.

Understand angular 16 directory structure

If you will install any third-party packages then also their folders are going to be stored within this node_modules folder. Basically it saves all the dev dependencies and dependencies.

4) src

This is our main important folder. All our component, service class, modules, adding CSS to the respective page everything we need to put in this folder only.

Understand angular 16 directory structure

As this is our main folder which holds our application code, Lets understand its internal structure.

  • app – It holds components, services, modules etc. Whenever we create new component or module it will be created here. By default it have one app component, app module and app routing module.
  • assets – It holds static assets like images, icons, etc.
  • favicon.ico – It’s basically avicon icon that displays in browser header
  • index.html – This is the starting point of our application where angular bootstraps & which holds html code with the head and body section
  • main.ts – This is the file from where our app module is loaded and application execution starts.
  • styles.css –  You can add global styles to this file, and also import other style files.

5) .editorconfig

This file defines coding standard and structure which should be used throughout project by team such as charset, quote type. When many developers working on single project everyone may follow different coding standards to declare variables, classes, style, size of each character, length, etc.

6) .gitignore

The files which you want to ignore in the git repository, you need to put within this gitignore file.

7) angular.json

 It contains the configurations such as what is the project name, what is the root directory as source folder (src) name which contains all the components, services, directives, pipes, what is the starting point of your angular application (index.html file), What is the starting point of typescript file (main.ts), etc.

8) package.json

This file stores the information about the libraries added and used in the project with their specified version installed. Whenever a new library is added to the project it’s name and version is added to the dependencies in package.json.

9) tsconfig.app.json

This file is used during the compilation of your application and it contains the configuration information about how your application should be compiled.

10) tsconfig.json

This file contains the configurations for typescripts. If there is a tsconfig file in a directory, that means that the directory is a root directory of a typescript project, moreover, it is also used to define different typescript compilation-related options.

11) tsconfig.spec.json:

This file is used for testing purposes in the node.js environment. It also helps in maintaining the details for testing.