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>
http://runtime-es2015.js
http://runtime-es5.js
http://polyfills-es5.js
http://polyfills-es2015.js
http://styles-es2015.js
http://styles-es5.js
http://vendor-es2015.js
http://vendor-es5.js
http://main-es2015.js
http://main-es5.js</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 chapters.


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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s