Understanding Angular Project Structure

Angular Project Structure

The root folder application contains subfolders e2enode_modules and src.  It also contains a few configuration files.

Table of Contents

Angular Project Structure

.editorconfig: This is the configuration file for the Visual Studio code editor. You can visit http://editorconfig.org for more information.

.gitignore: Git configuration to make sure autogenerated files are not committed to source control.

angular.json: This is the configuration file for Angular CLI. The older versions of Angular used the file angular-cli.json

browserslist: Ensures the compatibility of the Angular app with different browsers.

karma.conf.js: The Configuration file for the karma test runner.

package.json: The package.json is an npm configuration file, that lists the third-party packages that your project depends on. We also have package-lock.json

README.md: The Read me file

tsconfig.jsontsconfig.app.json & tsconfig.spec.json are Typescript configuration files. The tsconfig.json is the Typescript compiler configuration file. This file specifies the compiler options required for the Typescript to compile (transpile) the project. The tsconfig.app.json is used for compiling the code, while tsconfig.spec.json for compiling the tests

tslint.jsontslint is a static code analysis tool. We use this to check Typescript code quality. To check if TypeScript source code complies with coding rules. TSLint checks your TypeScript code for readability, maintainability, and functionality errors


This folder contains the files required for end-to-end tests by the protractor. Protractor allows us to test our application against a real browser. You can learn more about protractors from this link


All our external dependencies are downloaded and copied here by NPM Package Manager.


This is where our application lives.

app folder

The Angular CLI has created a simple application, which works out of the box. It creates the root component, a root module, a unit test class to test the component. Now let us see each component of the application one at a time

The src folder is where our application lives.

Note: TO find out how to create a new Angular project refer to How to Create a new project in Angular

Leave a Reply

Discover more from BHUTAN IO

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top