Menu
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?
vendor.bundle.js which contains all Angular code and is responsible for starting the bootstrap process?Once the bootstrap process starts how exactly the application knows where to go, namely how does it trigger main.ts? Is it only the property
"main": "main.ts"
inside .angular-cli.json which defines that?
360
The bootstrap process loads main. ts which is the main entry point of the application. The AppModule operates as the root module of our application. The module is configured to use AppComponent as the component to bootstrap, and will be rendered on any app-root HTML element encountered.
main. js contains all our code including components (ts, html and css codes), pipes, directives, services and all other imported modules (including third party). As you can see over time main. js file will be bigger and bigger which is a problem as in order to see the website browser needs to download main.
Here, the bootstrap method starts the Angular application. It refers to AppModule, which looks into the app folders. You can see in the "app. module" file that a bootstrap array which is basically a list of all the components analyzes the index.
Angular follows component based architecture, in component-based architecture, a large application is broken (decoupled) into functional and logical components. These components are reusable hence can be used in any other part of the application.
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.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
