How Angular know which module is the startup module?

In this article, we will learn about How Angular 9 knows which module is the startup module and which is not? Also, we will understand Which conventions Angular team Uses by Sagar Jaybhay.

Which One is the startup Module?

This is mentioned in the main.ts file and below is coed for this 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();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic is used to a bootstrap module. This used to set the first module. But another question is …..

How main.ts file is invoked in an angular application?

The main.ts file is invoked by index.html file. But if you see the index.html file code we didn’t find any kind of script invocation code because these all things are done in bundling and minification and when you see dist folder you can see some js files.

Before bundling index.html code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Customerapplication</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>

After bundling index.html file in the dist folder. This bundling is done by a webpack.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Customerapplication</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>
<script src="runtime-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule defer></script></body>
</html>

In the above code, you will see the script files which angular refer.

  1. Runtime.js:- this file contains code for webpack runtime.
  2. Polyfill.js:- used to new code run in old browser
  3. Vendor.js:- this is actually our code or custom coded files where our component, module, and models have resided.
  4. Main.js:- this is the point where the first module in our program is called.
  5. Style.css:- it contains all CSS code

Naming Convention Used By Angular Team

Whatever the angular team followed for file naming convention by angular is Angular Style Guide. For more information about this, you can visit this link https://angular.io/guide/styleguide

default angular naming conventiones

In the above image, the app is the root of the application. Names are given us

  1. root_folder_name.component.ts
  2. root_folder_name.component.css
  3. root_folder_name.module.ts
  4. root_folder_name.component.html

In angular team thinking app comprises of Html, CSS, model.  This is given by the angular team style guide. But if you want to use your thought process, company guidelines in which you worked you can use.

Now onwards we create customer applications in that we create customer models and whatever the name in the app we renamed it, the customer.

Below is our customer model

export class Customer{
    CustomerName:"";
    CustomerID:number;
    CustomerAmount:number;
}

To bind these properties with the component we need to use directives which are used for binding or data flow means from view to component or from component to view. This data flow is in one way or two way. It also used to manipulate the dom elements. We learn this in the upcoming post.


GitHub Project Link: https://github.com/Sagar-Jaybhay/angular9


Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

You may also like...