Modules
Explore the modules provided by Angular's CLI.
We'll cover the following...
Here is the code so far.
{ "$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
Now, the question is, how does our application know to use AppComponent
? The mere existence of the files in our project isn’t enough. This is where AppModule
comes in.
app.module.ts
Open up app.module.ts
and inside we’ll see an import statement at line 4 for our AppComponent
. If AppComponent
was the glue for our HTML, CSS, and component code, AppModule
is what binds our entire application.
Along with the import for AppComponent
notice the import statements for
BrowserModule
and NgModule
at lines 1 and 2. BrowserModule
is a module Angular provides to run our app in a browser.
The import for NgModule
and its @NgModule
decorator is similar to @Component
, which we saw ...