Menu
Going by the global convention, lets assume my root component is named as AppComponent with its selector being app-root and root module as AppModule.
AppModule is bootstrapping AppComponent, which I assume, tells angular that this component is my root component.
But in index.html also we call app-root, which again calls the AppComponent.
My question is why do I need to call the entry component in two places(index.html and appModule.ts).Why can't angular guess the root component defined from one place?
PS: i am eagerly looking of answer/suggestions/advice.
Thanks in Advance.
264
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.
html file you must specify the root component using it's selector (usually app-root ).
Conclusion. So when an Angular application is started, the main. ts file is loaded first, here we bootstrap the root module i.e. app. module.
An entry component is any component that Angular loads imperatively, (which means you're not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.
The platformBrowserDynamic().bootstrapModule(AppModule) statement tells Angular which Module to bootstrap (usually the AppModule).
Inside of the bootstrapped Module you have a bootstrap: [AppComponent] statement which defines the Component that will be used to bootstrap the application.
And finally, in your index.html file you must specify the root component using it's selector (usually app-root).
The reason for the last part is so that Angular can actually find the element to be bootstrapped and initialise it. It is not uncommon to wrap your root component in other HTML elements.
94
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
