Angular Folder Structure is the main topic of this tutorial. In the last tutorial, we have learned to Install Angular in our system, also we had created our first project in Angular successfully.
Now, It’s time to know how Angular works and it is very important to understand the Angular folder structure before diving into project development.
Prerequisites
- Latest Angular Installed in computer
- A created project using Angular CLI or Manually
Now open the project in your favorite code editor like VS Code, Atom etc. I am using here VS Code (Visual Studio Code) to show you the Angular Folder Structure.
Now open the terminal or command prompt and navigate to your project folder and simply run “code .“
cd ~/Desktop/MyApps/my-new-angular6-project code .
It will open your project in VS code editor that will look like the snap showing below.
Understand Angular Folder Structure
So let’s know about the Angular Folder Structure which is used when we load or access project in the browser.
In above screenshot we can see project files and folders created.
Understand Angular File Structure
Package.json
{
"name": "my-new-angular6-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
Package.json file mainly tells us about the project name, project version, typescript version used by the application. There is some script defined which execute when we run from the terminal like ng serve, ng build, etc.
Dependencies describe what are the Node Modules is required to run the project, Whenever we install a Node Module, the system includes it within dependencies.
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-new-angular6-project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-new-angular6-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-new-angular6-project:build"
},
"configurations": {
"production": {
"browserTarget": "my-new-angular6-project:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-new-angular6-project:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [
],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"my-new-angular6-project-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-new-angular6-project:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-new-angular6-project:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "my-new-angular6-project"
}
Angular.json is a file that tells about the project architecture, means which file should load first and so on to start the project.
You can find the “options” under “architect” in the above code and within you will see the index and main file.
"index": "src/index.html", "main": "src/main.ts",
It is saying that when the project served by the command “ng serve“, Firstly load the index.html from src folder and for Javascript load the main.ts file.
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyNewAngular6Project</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> </head>
<body>
<app-root></app-root>
</body>
</html>
In the above code immediately after the body tag, You can see <app-root></app-root>, This is the root module of the project. Angular project loads it’s all pages within this.
Main.ts File
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
In above code you can find this line “import { AppModule } from ‘./app/app.module’“, It is the main module file which is responsible for any Angular project. It loads all default or custom components, services, directives, and modules then the page rendered in the view.
Angular Folder Structure
- e2e
- node_modules
- src
There are three folders available in Angular Project. For project development, The src folder is the main folder to work on. When you go to the src folder there are again three folders app, assets, environments.
All images, CSS & font files live in the “assets” folder. You can also create folders for your project pages like login, dashboard, etc. To make the project consistent always create a new folder for the component, services related to the particular module.
Bonus – What is Typescript?
An Angular project uses Typescript files to code the Javascript. So it is important to know about the Typescript Language.
Typescript is a language which is used by large applications, In a Typescript file, You can define Classes, Modules and Data Types. When the Typescript file compiles, It converts the Typescript code into Javascript code that is compatible by browsers.
So, For the browsers, The Typescript code served as a Javascript code that is executed by it’s Javascript Compilers.
Hope this tutorial helps you to understand the Angular Project Architecture, If you have any doubt or anything that I have left in this tutorial, Please let me know in the comment section.
