Angular Initial File Structure and Bootstrapping

Angular initial folder structure with descriptions — Initial folder structure, all files with description

The src folder contains all files related to our Angular app.
The .gitignore file indicates which files should be ignored by git.
The .browserslistrc contains configurations for target browsers.
Angular.json contains configurations for the build process.
Karma.conf.js contains configurations for unit testing.
Package.json defines the required npm dependencies for the app.
Tsconfig.app.json contains compiler options related to our app.
Tsconfig.spec.json contains TypeScript configurations for the tests.

The SRC Folder

The src folder contains the necessary files for our application. When we create a component with ng generate component <name-of-the-component>, the Angular CLI adds all related files for the component in the src > app folder. All static files (icons, images) are kept in the asset folder.

//environments > environment.prod.ts file
export const environment = {
  production: true
};

//environments > environment.ts
export const environment = {
  production: false
};

Production build is generated by default when we run the command ng build and Angular creates a dist folder containing our compiled application following the configurations from angular.json. Angular.json has an array (“fileReplacements”) that indicates which environment file will be replaced during the build. In other words, Angular will replace enviroment.ts with enviroment.prod.ts.

Angular Bootstrapping Process

Index.html is the base page of the application. When the browser loads it, the bootstrapping process starts. The entry point of the app is defined by the main.ts file.

platformBrowserDynamic() indicates in what platform our application will be served (in this instance, the browser loads it). bootstrapModule(AppModule) determines what the entry module of the app is. ‘bootstrap: [AppComponent]‘ in the app.module.ts file shows the component that will be bootstrapped. The AppComponent class has a decorator that defines the decorator selector <app-root> for the component and when Angular locates <app-root></app-root> element in the index file, it will load the component between these tags.

// --> main.ts file
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
//indicates in what platform our application will be served
platformBrowserDynamic().bootstrapModule(AppModule) // --> entry module
  .catch(err => console.error(err));

// --> app.module.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  // --> what component to load during the module bootstrapping
  bootstrap: [AppComponent] 
})
export class AppModule { }

<!-- index.html from the dist folder -->
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>AppProjectStructure</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.ef46db3751d8e999.css"></head>
<body>
  <!-- Angular will load the component between the tags below -->
  <app-root></app-root>
<script src="runtime.50a16142b645b8b7.js" type="module"></script>
<script src="polyfills.16cca45f8e298f6c.js" type="module"></script>
<script src="main.3610be8b9202e37b.js" type="module"></script>
</body></html>

// --> App Component
import { Component } from '@angular/core';
@Component({
 // --> the selector in the index.html
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-project-structure';
}

Summary

All components and app logic are located in the src folder. Most of the configuration files are outside of it. In angular.json you can change and add new configurations for the build process. The “entry point” of the app is main.ts. It determines the entry module, then the module defines what the bootstrapped component is. Angular locates the selector of the AppComponent in index.html and loads it in the app-root element.