Angular - How Angular Application Starts?

---

---

This chapter will explain how an Angular application starts when you run the command. It will cover the configuration, the step-by-step process, and the significance of the various files involved.

How Angular Application Starts?

Before diving deep into what happens when we run the command in our terminal to start the application, let's first look at the basic commands that run our Angular application.

Commonly we use the following commands to run our Angular Application:

• ng serve
• npm start

ng serve

The ng serve is the standard command specific to running an Angular application. However, you can also use the shorthand ng s to start an Angular application.

npm start

The npm start command is specific to starting a node.js application. In Angular, when we run this command, it looks for the "start script" within the package.json file and executes the command defined there, which is "ng serve".

Below is a snippet of the package.json file, where you can see the ng serve command defined in the start script:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:my-crud-app": "node dist/my-crud-app/server/server.mjs"
  },

This was basic information about how to start an Angular application using the command, but have you ever thought about what happens behind the scenes when we run these commands? Let's deep dive into it and try to understand it better.

What Happens when these Commands runs?

Here is the step-by-step guidance on what happens when we run the above commands:

1. Running the Angular Application

The first step is to run the Angular application using the following command:

ng serve

2. Angular CLI Behavior

Once you run ng serve, the Angular CLI checks for the presence of the package.json file, which contains project dependencies and configurations. It includes your application "name", "version", "scripts", and other "dependencies".

{
  "name": "my-crud-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:my-crud-app": "node dist/my-crud-app/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.8",
    "express": "^4.18.2",
    "json-server": "^1.0.0-beta.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.8",
    "@angular/cli": "^17.0.8",
    "@angular/compiler-cli": "^17.0.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

3. Checking the Configuration File (angular.json)

The Angular CLI reads the angular.json file to collect the project-specific settings, such as the "build options", "assets", "styles", and other configurations.

The angular.json file's initial data might look like this:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist/my-app",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "src/styles.css"
          ],
          "scripts": []
        }
      }
    }
  }
}

4. Bundling and Initial Chunk files

After reading the configuration files, Angular CLI starts bundling the application into various chunk files (like polyfills.js, main.js, and styles.css) for loading. These files are generated based on the configuration from angular.json.

5. Bootstrapping the Application

Once the browser bundling is done, the Angular CLI looks for the "entry point" of the application, which is the src/main.ts file. This file is responsible for bootstrapping the "root component" of the Angular application.

The main.ts file might look like this:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

6. AppComponent and the Template

After bootstrapping the AppComponent, Angular loads the component template. The AppComponent usually serves as the "root component" of your application.

The AppComponent might look like this:

import { Component} from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppComponent, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent{
  title = 'my-crud-app';
}

7. Router Outlet for Component Rendering

Inside the AppComponent template, you use <router-outlet> to specify where the child components will be dynamically loaded and displayed:

<router-outlet></router-outlet>

8. Serving the Application

The Angular development server (Webpack) serves your application on URL localhost:4200 with default port 4200. When you open the browser and navigate to http://localhost:4200, it loads the index.html file first.

The index.html includes the root component <app-root></app-root>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyCrudApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

9. Application Display in Browser

Angular will replace the <app-root></app-root> tag with the content from your AppComponent (or any child components routed via <router-outlet>).

Conclusion

The common flow when you run any Angular application will be as follows:

• The ng serve command bundles an initial chunk files and serves the application.
• The files package.json and angular.json are read to confirm all dependencies and settings.
• The application main entry file (main.ts) bootstraps your Angular application.
• AppComponent serves as the root, and the <router-outlet> directive handles dynamic content loading based on routing.
• The index.html file is rendered and served, and the app runs on URL localhost:4200 with default port 4200.