An entry point is the initial source module from which a build tool discovers an application's dependency graph. In an Angular application, src/main.ts serves this role: webpack starts there, follows its import statements, and compiles the referenced TypeScript and template files into application bundles. section 9.3.2
The entry point also begins browser startup. After importing Angular platform functionality and AppModule, main.ts calls platformBrowserDynamic().bootstrapModule(AppModule). This initializes Angular for the browser and connects Angular's framework code with the application's custom code. section 9.4.2
The entry point determines both the build's starting location and the runtime initialization path:
- Webpack begins with main.ts and recursively follows the modules named by its import statements. section 9.3.2
- The compiled output from the application source becomes the main.js bundle; its name derives from the entry point. section 9.4.2
- Executing main.ts starts Angular by bootstrapping AppModule after platformBrowserDynamic initializes the browser platform. section 9.4.2
- Changing files included in the main.js dependency graph causes the affected bundles to be rebuilt during ng serve. section 9.3.2
Angular's main.ts entry point
A generated Angular project uses main.ts as its entry point: it imports platformBrowserDynamic and AppModule, then calls platformBrowserDynamic().bootstrapModule(AppModule). The imports expose Angular features and application code; the bootstrap call starts the application. section 9.4.2
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Inspect the complete main.ts listing to see how imports and the bootstrap call form the build and runtime starting point. section 9.4.2
