Calling Angular Component without calling root component

Question

I have built an Angular app in order to use in a tomcat production environment which works properly.

However, every time I use an angular component in my jsp pages I must load app-root first.

Is there any way to call directly a specific component in Angular without passing through the root component?

App-Root - Shop Component - Cart Component - Calc - Invoice

For instance: <cart></cart>

UPDATED @Mina Michael

Your answer works! But this is not exactly what I am looking for (Maybe I am not taking the right approach.) I have two different modules each with a bootstrap component.

In my main.ts

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

platformBrowserDynamic().bootstrapModule(CounterModule).catch(err => console.log(err));

In my index.html I have both, this works! But If I stop the app and do "npm start or npm build" it crashes showing error in bootrstrapping... dont know why

<app-root></app-root>
<counter></counter>

Any idea?

Your solution is good but I need with the same app code be able to execute whatever component I need.

Answer 1

I'm assuming that your project was generated by angular-cli and the files follow the standard names.

In index.html replace <app-root></app-root> by <cart></cart>

---

In app.module.ts

1) You'll find a line that imports "AppComponent"

import { AppComponent } from './app.component';

remove it (or leave it) and import your cart component.

import {Cart} from './path/to/cart.component';

2) also add "Cart" to "declarations". You'll find this:

  declarations: [
    AppComponent,

make it like this:

  declarations: [
    Cart,

3) also change this line

bootstrap: [AppComponent]

to be

bootstrap: [Cart]

And that should do it.

---

Another simpler way is to just open app.component.html and place Cart there instead of whatever is in there, like this:

<cart></cart>