Reading Time: 3 minutes

Are you new in Angular and don’t know much about its file structure? Don’t worry after going through this blog I ensure that you will have enough understanding about its file structure.

Before we begin with the file structure, let’s have a look at how to create an angular app.

Create an Angular app by using the below command.

ng new My-First-App

Now open the folder “My-First-App” in your favorite editor and you will see there an Angular app is created.

Structure of My-first-App

Here you can see that a lot of files are created. Let’s understand the file structure of My-First-App.

• tslint.json:– Default TSLint configuration for apps in the workspace. TSLint is a tool that checks TypeScript code for readability, maintainability, and functionality errors.

• tsconfig.json:– Default TypeScript configuration for apps in the workspace. It includes TypeScript and Angular template compiler options like ECMAScript version, module etc.

• package-lock.json:– Provides version information for all packages installed into node_module.

• package.json:- It contains the dependencies of your Angular app. There are two types of dependencies. The difference between these two is that devDependencies are modules which are only required during development, while dependencies are modules which are also required at runtime.

• angular.json:- It contains the configuration options for the build, serve, and test tools that the CLI uses, such as TSlint, Karma, and Protractor. Here a tool called Karma is a JavaScript test runner created by the Angular team.

• .gitignore:- This file specifies intentionally untracked files that Git should ignore.

• .editconfig:- This file contains the configuration of the editor you have been using for developing Angular App. EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

• node_module:- This folder contains all those modules which are necessary to run angular app and external modules which mentioned in package.json file.

Let, understand the file structure of the src folder.

Starting from the top:-

• app:- App folder contains the modules, components, services etc.

• assets:- Assets folder contains image files and other asset files.

• environments:- Environments folder contains two files environment.prod.ts and environment.ts both files provide build configuration options for particular target environments.

• browserlist:- Configures sharing of target browsers and Node.js versions among various front-end tools.

• favicon.ico:- An icon to use for this app in the bookmark bar. It appears in your browser bookmark bar when the app is running in it.

• index.html:- It is the main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don’t need to add any <script> or<link> tags here manually.

• karma.conf.js:- In order to serve you well, Karma needs to know about your project in order to test it and this is done via a configuration file called karma.conf.js. 

• Main.ts:- It is the main entry point of your Angular app. It basically loads or bootstraps the root module file called “app.module.ts”.

• polyfills.ts:- It provides polyfill (by using Pollyfill we can implement features which are not supported by browser) scripts for browser support.

• style.css:- It is the CSS file of index.html

• test.ts:- The main entry point for your unit tests, with some Angular-specific configuration. You don’t typically need to edit this file.

• tsconfig.app.json:- JSON file which inherits the tsconfig.json file and contains the list of excluded files which you want to exclude during the serve (Basically it exclude all specs files).

• tsconfig.spec.json:- JSON file which inherits the tsconfig.json file and contains the list of included files (Basically it include spec files) during testing, compiler option etc.

I hope, now you have basic knowledge of file structure of angular and you can also refer the official documentation of Angular for more in detail.