Exploring the Code
Explore the foundational structure of an Angular application by examining its directory and key files. Learn how the CLI organizes components including HTML, CSS, TypeScript, and test files. Understand the role of the app component and how Angular uses templates and metadata to render your application. This lesson helps you grasp how these pieces fit together to build and display your Angular app.
Directory and file structure
Our previous code has a root file structure similar to the one below:
| exploring-angular | e2e | src | node_modules - angular.json - package-lock.json - package.json - README.md - tsconfig.json - tsconfig.app.json - tsconfig.spec.json - tslint.json - karma.conf.js
Look at this for reference.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"exploring-angular": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/exploring-angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"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,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "exploring-angular:build"
},
"configurations": {
"production": {
"browserTarget": "exploring-angular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "exploring-angular:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "exploring-angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "exploring-angular:serve:production"
}
}
}
}
}},
"defaultProject": "exploring-angular"
}
Root directory
Most of these root files are configuration files that we won’t interact with much, if at all. We’ll modify a few later on in the course, we can leave them as-is for now. More detailed information on these files can be found online in the Angular QuickStart guide.
e2e
In addition to the two configuration files are two directories: e2e and src. The e2e directory contains the end-to-end tests (using the Protractor framework). We’ll use Cypress to perform ...