Angular Komponente ohne Aufruf der Root-Komponente aufrufen

Question

Ich habe eine Angular-App gebaut, um in einer Tomcat-Produktionsumgebung zu arbeiten, die richtig funktioniert.

Jedes Mal, wenn ich eine eckige Komponente in meinen JSP-Seiten verwende, muss ich zuerst app-root laden.

Gibt es eine Möglichkeit, direkt eine bestimmte Komponente in Angular aufzurufen, ohne die Root-Komponente zu durchlaufen?

App-Root - Shop Component - Warenkorb Component - Calc - Rechnung

Zum Beispiel: <cart></cart>

AKTUALISIERT @Mina Michael

Ihre Antwort funktioniert! Aber das ist nicht genau das, was ich suche (Vielleicht bin ich nicht der richtige Ansatz.) Ich habe zwei verschiedene Module mit jeweils einer Bootstrap-Komponente.

In meinem main.ts

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

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

In meiner index.html ich beide haben, das funktioniert! Aber wenn ich die app zu stoppen und tun „npm Start oder npm Build“ stürzt Fehler in bootrstrapping zeigt ... weiß nicht, warum

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

Jede Idee?

Ihre Lösung ist gut, aber ich brauche mit dem gleichen App-Code in der Lage sein, was auch immer Komponente ich brauche.

Answer 1

Ich gehe davon aus, dass Ihr Projekt von angular-cli generiert wurde und die Dateien den Standardnamen folgen.

In index.html ersetzen <app-root></app-root> von <cart></cart>

---

In app.module.ts

1) Hier finden Sie eine Zeile finden, die "AppComponent"

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

entfernen (oder lassen Sie es importiert) und importieren Sie Ihre Warenkorbkomponente.

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

2) auch "Warenkorb" zu "Deklarationen" hinzufügen. Sie finden diese finden:

declarations: [ 
    AppComponent, 

es so machen:

declarations: [ 
    Cart, 

3) auch diese Zeile

ändern

bootstrap: [AppComponent] 

bootstrap: [Cart] 

zu sein und das sollte TU es.

---

Ein anderer einfacher Weg ist, einfach offen app.component.html und Platz Wagen dort statt, was da drin ist, wie folgt aus:

<cart></cart> 

Answer 2

ich die Lösung gefunden:

webpack können Sie in specficy multiplizieren Sie die Eintrittspunkte.

In meinem Fall habe ich zwei Module AppModule und CounterModule, die ich sie unabhängig nennen möchte.

Ich habe counter.ts Datei zusammen mit main.ts erstellt und referenzierte sie in webpack.common.js Datei.

Jetzt kann ich meine App entweder durch Aufruf von App-Root oder Counter-Tag starten.

Quellen:

Can your webpack.config file serve multiple entry points?

https://webpack.github.io/docs/multiple-entry-points.html

Vielen Dank für Ihre Bemühungen, Jungs!