Angular Application Folder Structure

Introduction

Every-time whenever you plan to learn new framework your first step should be to get clear idea on it’s folder structure so that you will have better sense of learning and then it helps a lot while working on that particular framework, by saying that in this tutorial I am going to give you details on angular application folder structure created by angular cli.

In last tutorial “How to Create Angular Application using Angular CLI” I have given step by step guide on you can create new Angular application using Angular ClI.

So I assume that you have created new angular application on your own using angular cli if not please do and now let’s continue reading this tutorial to get in-dept understanding of angular application.

So open up newly created project in visual studio code as I told you to install in Angular Development Setup tutorial if you have not installed then to please do refer to the tutorial and install your code editor.

let’s see what files and folder does our new angular application have:

e2e:

So the first folder we have here in project is e2e which stands for End-to-end and this where we write end to end test for our application.

If you have not worked with end to end Test before, the let me tell you end-to-end Test is basically automated Test that simulate real users so we can write code to launch our browser navigate to the home page of our application and click a few links here and there, fill out a form, click a button and then assert so there is something on the page this is the example of an End to end Test.

As a beginner you don’t have worry bout e2e for now.

node_modules:

Below to the e2e folder we have our node_modules folders and this is where we store all the third party libraries that our application may depend upon including Angular itself.

node_modules folder is purely for development, when we compile our application part of this third party libraries are put in a bundle and deployed with our application.

So we don’t have to deploy this node_modules folder on server.

src:

Next we have src folder also called as source folder and this where we have our actual source code of our application.

app:

So we have this app folder here and inside this folder we have a module called app.module.ts and a component, there are four files are there for component – app.component.html, app.component.scss, app.component.spec.ts and app.component.ts and routing module we will see deails regarding all the files here in further tutorials.

For now keep in mind that every application has at-list one module and one component, you get familiar with component and modules very soon just keep following itech empires tutorials.

assets:

Below to the app folder we have assets folder where we store static assets of our application for example any image files, any icons or any text files so all of this files go here in assets folder.

environments

Below to the assets we have this environments folder and this is where we store configuration settings for different environments, so here we have one file “environment.prod.ts” for for production environments and the other “environment.ts” for development environments

Other files in source folder:

Next the other files we have in the source folder here are favourite icon which is the icon displayed in the browser, we have index.html which is a very simple html file that contains our angular application.

index.html

If you open up index.html file you will note that we don’t have any references to the script of stylesheets, this references will be dynamically inserted into this page.

main.ts

Right Below with the index.html file we have main.ts file, which is typescript file this is basically the starting point of our application, you can think this starting point like a main method in c++ we have exactly same concept here.

So all we are doing here in main.ts file is bootstrapping the main module of our application, so angular load this module and then everything else starts from there.

polyfills.ts

Next we have polyfills.ts file which basically imports some scripts that are required for running Angular, because angular framework usage feature of JavaScript that are not available in the current version of JavaScript supported by most browsers.

So polyfills.ts files basically fills the gap between the feature of Javascript that Angular Needs and the features supported by the current browser.

styles.scss

Next we have styles.scss this is where we add the global styles for our application and also keep in mind each page or each component can have it’s own style

test.ts

Next we have test.ts file which is basically use for setting up our testing environment, you don’t have to worry about it for now.

Other files in the root of application folder:

So in root of our application folder here we have .editorconfig file which is configuration for your current editor it helps while working in a team environment to match same setting in editors.

Next the .gitignore file which is used untracked files and folder to ignore from our git repository.

angular.json

Next angular.json files is basically a configuration file for Angular CLI

browserslist

Next we have browserslist file which is used by the build system to adjust CSS and JS output to support the specified browsers in this file.

karma.conf.js

Next we have karma.conf.js file which is a configuration file for Karma, Karma is a test runner for JavaScript code.

package.json

Next package.json file this is an important file for our application basically this a standard file for every node project.

Apart from a bunch of basic settings here like the name and the version of the application we have important settings like dependencies which determines the libraries that your application is dependent upon.

Here you can see that we have 8 reference to the angular libraries, all this libraries start with @angular and after that we have the name of the library.

So in the further when you install all the third party libraries for your application, you will see all of them under dependencies section

Below to the dependencies we also have another setting called devDependencies and this are the libraries that we need in order to develop this application, so we don’t need to run our application on a production server this are purely for development machine.

tsconfig.json

Next we have another three files here prefix with tsconfig which has bunch of configuration setting for TypeScript Compiler, so typescript compiler looks at this settings and based on this settings it is going to compile typescript code into JavaScript that browsers can understand.

Again for the most part you don’t have to change any of this here, just be aware that if in the future in a complex project you need to change your typescript compiler settings then this where you need to apply your settings.

tslint.json

Finally we have tslint.js file which includes number of settings for tslint, incase you don’t know tslint is a static analysis tool for typescript code, so it checks your typescript code for readability, maintainability and functionally errors.

Conclusion

So overall this is the basic structure of angular project, the important location here is the app folder where you will be working on most of the time while working on angular project.