11 May 2018 Sudhanshu Ranjan 824

Angular : Understanding about all files and folders created by Angular CLI

Welcome back guys, since long time I have come so today post I will share the knowledge about angular files and folder structure which is created default by angular CLI.

In the earlier post, How to setup angular 2 environment and build a project we have learnt how to create an Angular app using angular CLI. Now, lets take a moment to understand the files and folder structure that was created by Angular CLI.

By the way, there is no need to know about all configuration files & folder in deep but I will tell you about all and which is more important.

Lets look the image with angular folder and files structure.

Angular files and folder structure


e2e stands for end to end testing. This folder contains spec and configuration files related to end to end testing using protractor. 


It contains all the angular depedency files.basically it read’s the “package.json” file in the current directory and installs all the package’s dependencies into this folder using Node Js.

It is main and most important folder of angular application where your all angular component, template, images, stylesheet, spec, services etc. files contains.

    app/app.component.css : Define the css stylesheet for this component
    app/app.component.html : Define the HTML Template
    app/app.component.spec.ts : Define the unit test cases
    app/app.component.ts : It is root component and you can associate many nested component as application required.
    app/app.module.ts : Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare. All component or Module would be associated with AppModule.

 assets/* :  It contains the images or any files in this folder.

environments : The environment folder consists of two environment files one for development and other for production. The list of which environment maps to which file can be found in angular-cli.json file.

browserslist : A configuration file to share target browsers between different front-end tools.

favicon.ico : It contains the website fevicon image

index.html : It is Main HTML page of your application. This Html file contains all the css, js file and required refrences of your website. Only one Html file is here that's why it called single page application.

karma.conf.js : It is used for Unit test configuration for the Karma test runner, used when running ng test command. 

main.ts : It is main entry point of your application and compiles and bootstraped the application rootModules.

polyfills.ts : All browsers have diffrent level support of the web standards. Polyfills.ts helps to normalize those differences. 

styles.css : you can put css stylesheet here which will work globally.

test.ts : This is main entry point for your unit test.

tsconfig.app.json : It contains TypeScript compiler configuration for the Angular app.

tsconfig.spec.json : It contains TypeScript compiler configuration for the Angular unit test.

tslint.json : Linting helps keep your code style consistent.



EditorConfig file is used to define and maintain consistent coding styles.


Contains the git configuration


Configuration for Angular CLI.


Contains all your appliction dependencies in two sets, dependencies and devDependencies.


Basic documentation for your project


Contains configuration about IDE that how the TypeScript compiler generates JavaScript from the project’s files.

I hope you have enjoyed this article and found it useful.Please add your comments and valuable feedback. Please share with your friends!

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2019 dotnetcube.com. All rights reserved