Loading, please wait...

Project Structure of Angular 2,4,5 or 6

Project Structure of Angular 2,4,5,or 6

In this article, I will describe the whole Project Structure of Angular 2,4,5 or 6 almost each and every page. What does each and every page? Before explain about project structure create a new Angular 2,4,5 or 6 project. I have already created the new project. If you want to create a new project or set up Angular  2,4,5 or 6 before reading this article please proceeding below the article.

AngularJS 2.0 Overview

Setup and Create Angular 2,4,5 or 6 Project

Let's start it.

I have already created Angular 4 project which name is "AngApp". After opening the AngApp you can see the Project Structure below.


As you can see below snapshot. I have highlighted the most important files and folder.




I am describing each and every important files and folder.

1. node_modules: This folder contains all third-party modules which are listed in the JSON file. This file is created by node.js.


2. .angular-cli-json : This file contains complete information after compilation. If first compile HTML and then main.ts file.



3. conf.js : This file is used for testing purpose. In this file we write test cases. Unit test configuration for the Karma test runner, used when running ng test. Internally it uses jasmine framework for testing.

4. josn: It is the most important file. This file store dependency of all files. And it stores all references to node_modules files. If you add any dependency it's store inside this file. You can see below.



5. tslint.json: Linting configuration for TSLint(https://palantir.github.io/tslint/) together with Codelyzer(http://codelyzer.com/), used when running ng lint. Linting helps keep your code style consistent.

6. tsconfig.json: TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.

7. protractor.conf.js: End-to-end test configuration for Protractor, used when running ng e2e.

8. .gitignore: Git configuration to make sure auto-generated files are not committed to source control.

9. Editorconfig: Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Most editors support a .editorconfig See http://editorconfig.orgfor more information.

src folder: This folder contains templates, styles, images, angular components and anything else In angular project inside src folder. Any files outside of this folder are meant to support building your app. Structure of this




app/app.component.{ts,html,css,spec.ts} : This file contains all about CSS stylesheet, HTML pages and typescript file and a unit test.

app/app.module.ts: This tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.

Index.html: The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and CSS files when building your app so you never need to add any