Exploring the Code
Let’s explore the angular code and look at some important files within our new application.
We'll cover the following...
We'll cover the following...
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" }
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 ...