CODEWITHSUNDEEP
angularangular-cli
Unknown developer
Unknown developer

Reputation: 5930

What exactly triggers main.ts in Angular

By building a basic Angular CLI project, we get the following index.html when we run the application:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SimpleCLI</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 type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js">
  </script><script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Next step is our entry point main.ts. Of course the name does not matter and is defined in .angular-cli.json. Could someone clarify the following points?

Upvotes: 21

Views: 44637

Answers (5)

deepika yadav
deepika yadav

Reputation: 91

main.ts file is the entry point of our web-app.It compiles the web-app and bootstraps the AppModule to run in the browser. It starts with importing the basic module which we need.

platformBrowserDynamic().bootstrapModule(AppModule)

This code has reference to the parent module i.e AppModule. Hence when it executes in the browser, the file that is called is index.html. index.html internally refers to the main.ts file which calls the parent module i.e AppModule.

When AppModule is called, it calls app.module.ts which further calls the AppComponent based on the bootstrap.

bootstrap:[AppComponent]

In app.component.ts, there is selector:"app-root" which is used in the index.html file. This will display the contents present in app.component.html.

Upvotes: 4

Manish Kumar
Manish Kumar

Reputation: 1

In Angular 7 (Angular CLI project), angular.json file contains all project information which contains information about complete project assets. In this file, main can be configured to any type script file which can then act as module starter for the configured application , as an example say start.ts. Now start.ts will act as starting point for the application module which should ideally responsible for bootstrapping the application using platformBrowserDynamic().bootstrapModule(YourModuleStarter)

Upvotes: 0

alcfeoh
alcfeoh

Reputation: 2257

main.bundle.js is the one responsible for starting the bootstrap process.

It is built by the Angular compiler based on the config read from angular.json, which is where it is indicated that main.ts is the main bootstrap file.

Upvotes: 2

Gaurav Dangi
Gaurav Dangi

Reputation: 71

  1. No Vendor.bundle.js don't contain angular code. It contain 3rd party plugins, eg. bootstrap, jquery, jquery plugins, which we included in package.json. It's not responsible for bootstrapping angular application.

  2. In main.ts file last line platformBrowserDynamic().bootstrapModule(AppModule) responsible for bootstraping of angular application. platformBrowserDynamic() part of this line indicates that we are about to boot Angular in a browser environment.

3.The bootstrapModule() function helps bootstrap our root module taking in the root module as its argument.

  1. AppModule is our root module which is the entry module for our application, this can actually be any of the modules in our application but by convention AppModule is used as the root module.

5.In our AppModule, we then need to specify the component that will serve as the entry point component for our application. In our app.module.ts file where we import the entry component (conventionally AppComponent) and supply it as the only item in our bootstrap array inside the NgModule configuration object. eg. bootstrap[AppComponent]

Upvotes: 5

Phil
Phil

Reputation: 7576

Yes, only angular-cli.json references it for handling the startup of the application.

main.ts is not a module but a simple script-file, executed from top to bottom and can have any other file-name.

The only other thing that affects it as a .ts file, is tsconfig.json, which handles the transpilation to javascript. but it does so by the *.ts file-name pattern not by referencing files individually.

Upvotes: 9

Related Questions