Angular 2 – Files & App Structure

angular app src structure

Understanding the Angular 2 Core Files and File Structure

Before starting with development with project, It’s necessary to understand the  core files and file structure of Angular 2 js, What they are and what this files does.  Let’s have a look over them one by one.

To getting start let’s create a demo app in Angular application with a single component.  Create new app using ng new AppName Angular CLI Command as we have seen in last tutorial.

with this a complete project will set up on your machine. Now have a look over below files.

The  src folder

All of Your application files are present in src folder,  All Angular Components, Services, Templates, Styles, Images, and anything else your app needs will store in src folder. Outside this folder app supporting files are placed.

angular app src structure

1. app/app.component.{ts,html,css and spec.ts}

This Defines the App Component along with an HTML template, CSS Stylesheet, and a unit test file. This is the root component of your application and all other component will be child of this app.component.  This is where we define our root component.

app/app.component.ts 

2. app/app.module.ts

This is the entry point of Angular Module to be bootstrapped. This Defines AppModule, this is the root module that tells to Angular how to assemble the complete application. At the beginning it declares only the AppComponent,  when to create any new component, or service you need to define it in app.module.ts file. So that it can marge all of individual parts in to one application.

app/app.module.ts

3. app/main.ts

This is like the glue that combines the component and page together. This is the main entry point for Angular application. It Compiles the application with the JIT compiler and bootstraps or start the application’s root module (AppModule) to run in the browser.

app/main.ts

 

4. index.html

This is the page,  the component will be rendered in browser. The main HTML page that is served when someone visits your application. Normally we don’t need to edit it. Angualr CLI will  automatically adds all the require js, css and other assets files when building your app.

index.html

The root folder of Angular

The  src/  folder is just one of the sub-folder item inside the project’s root folder. Other files that help you to build, test, maintain, document, and deploy the your application are present in root folder.

angular app root structure

1. node_modules/

Node.js creates this folder in to application root directory, and puts all third party modules dependencies listed in package.json file.

2. angular-cli.json

It holds all Configuration for Angular CLI. In this file you can manage several defaults configuration and also configure what files are included when your project is built.

3. package.json

In package.json file, npm configuration listing all the third party packages that your project uses. You can also add your own custom dependencies  here.