CODEWITHSUNDEEP
javascriptangulartypescriptangular-cli
fariba.j
fariba.j

Reputation: 1865

which file runs first in an angular 4 app when i run the app?

I'm using angular 4 and I have a question. when I run the project and use ng serve, which file in my project renders first? there are so many files like main.ts, angular-cli.json, app.module and I don't understand whats going on when I run ng serve.

Upvotes: 7

Views: 16278

Answers (4)

Baljeet Singh Khalsa
Baljeet Singh Khalsa

Reputation: 36

Started from index.html and set title and then go to body tag and that is selector of app component, Whenever ng-serve builds our application, it creates “bundles” and automatically adds these to our index.html file at runtime. So, from these bundles, the first code has to be executed from “main.ts” file, i.e., “main.ts” file is the main file from where the execution of an Angular application will start. then call bootstrap method that will call appModule, and list of component that grouped into appModule will load

Upvotes: 0

John Zuo
John Zuo

Reputation: 21

Only one thing which is stranger, if you add a 'console.log' before '@Component({' of 'app.component.ts', you will find that one will be called first.

beacause angular does not work in asynchronously.angular follow non-blocking

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

In Angular app,

Index.html is the start and it then main.ts

After Index.html, main.ts. Which tells which file to run. Which is mainly to bootstrap

main.ts is the entry point of your application, compiles the application with just-in-time and bootstraps the application .Angular can be bootstrapped in multiple environments we need to import a module specific to the environment. in which angular looks for which module would run first.

// The browser platform with a compiler

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


// The app module

import { AppModule } from './app/app.module';

Look at the following diagram which explains the structure very well. enter image description here

Upvotes: 13

Abhishek
Abhishek

Reputation: 380

angular.json -> angular-cli configuration file main.ts -> Angular module bootstrap application file. Set the entry module for your application. app.module.ts -> Based upon your entry module, it configures which component will load first from that module and what others dependency modules, components, pipes, services.

Upvotes: 10

Related Questions