In an Angular application, “module” has two meanings. A JavaScript module manages dependencies between files; an Angular module configures part of the application. Keeping the two distinct makes imports and application setup easier to follow. section 9.4.3
Every TypeScript or JavaScript file is treated as a JavaScript module. Its classes, functions, and variables are accessible only within that file by default. Mark a feature with `export` to make it available elsewhere, then use `import` to declare a dependency on it. A relative import begins with `./` and omits the file extension. During compilation, the development tools follow these dependencies and include required code in a JavaScript bundle downloaded by the browser. section 4.5.1 section 4.5 section 2.3.3
Listing 4.29. Importing specific types in the main.ts file in the src folder
import { Name, WeatherLocation } from "./modules/NameAndWeather";
let name = new Name("Adam", "Freeman");
let loc = new WeatherLocation("raining", "London");
console.log(name.nameMessage);
console.log(loc.weatherMessage);
The two named imports come from one file module; the path names the module without its `.ts` extension. section 4.5.1
An Angular module is a class decorated with `@NgModule`. Its configuration describes building blocks and dependencies to Angular. Every application has a root module; in an application created with `ng new`, `AppModule` fills that role. Its `bootstrap` property identifies the component Angular loads at startup. Feature modules are optional: use them to group related features and make a complex application easier to manage. section 9.4.3 section 19.0
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The root-module listing shows `@NgModule` imports and declarations alongside the `bootstrap` entry for `AppComponent`. section 9.4.3
Collecting component-library features
When an administration area needs Angular Material, a dedicated Angular module can collect the Material features the area selects. The administration module then imports that module. This separates feature selection from the rest of the administration configuration, though a component library still requires the application to fit its expected model and can be difficult to customize. section 7.4
Do not mistake a feature module for a provider boundary: providers defined by a feature module are available as though they were defined by the root module. section 19.0
