Erstellen Order Hub der nächsten Generation Anwendungen, die ein Standard-Angular-Repository verwenden

Die Verwendung eines standardmäßigen Angular-Repository bietet einen einfacheren, traditionelleren Ansatz für eine Angular-UI-Anwendung. Verwenden Sie diesen Ansatz, wenn Sie eine unabhängige UI-Anwendung erstellen und diese schnell und ohne große Abhängigkeiten oder gemeinsame Nutzung von Code codieren möchten.

Informationen zu diesem Vorgang

Dieses Verfahren führt Sie durch die Erstellung eines Order Hub der nächsten Generation Anwendung und speichern Sie sie in einem grundlegenden Angular-Repository.

Vorgehensweise

Extrahieren Sie die Order Hub der nächsten Generation Code. Weitere Informationen finden Sie unter Erste Schritte mit dem Anpassen Order Hub der nächsten Generation.

Notiz: Der Versionsparameter für dieom-compose.sh extract-orderhub-code Befehl mussoms zum Extrahieren der Order Hub der nächsten Generation Code. Der Versionsparameteromoc ist nicht anwendbar auf Order Hub der nächsten Generation.
Öffnen Sie eine Konsole und gehen Sie zu Order Hub der nächsten Generation Codeverzeichnis. Der Standardspeicherort istdevtoolkit_docker/orderhub-code .
Um die SSL-Verifizierung für Interaktionen mit Registern zu umgehen, setzen Siestrict-ssl auf „false“, indem Sie den folgenden Befehl ausführen.
```
npm config set "strict-ssl" false
```
Installieren Sie die neueste Version von@buc/schematics für den Zugriff auf die IBM®- bereitgestellte Schaltpläne durch Ausführen der folgenden Befehle.

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz

Erstellen Sie einen Ordner für Ihre neue Anwendung. Der Name des Ordners ist der Modulname.
Gehen Sie in der Konsole zu dem Ordner, den Sie erstellt haben.
Erstellen Sie einen Arbeitsbereich und initialisieren Sie eine neue Angular-Anwendung, indem Sie den folgenden Befehl ausführen.

ng new --collection=@buc/schematics \
--module-name=<name-of-the-module> \
--module-short-name=<the-short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem

Notiz: Derng new Befehl erfordert den--mode=on-prem Parameter.

Das Schema unterstützt die folgenden Optionen.

--skip-git: Diese Option initialisiert keinen GitHub Repository. Der Standardwert ist false.
--commit: Diese Option beinhaltet die anfängliche GitHub Informationen zum Repository-Commit. Die Standardeinstellung ist 'True'.
--module-name: Diese erforderlichen Optionen sind der Name des Moduls. Zum Beispiel, Buc-App-Einstellungen.
--module-short-name: Der Kurzname für das Modul. Wenn der Modulname Bindestriche enthält, muss der Kurzname der Text nach dem letzten Bindestrich sein. Wenn das Modul beispielsweise Buc-App-Einstellungen muss der Kurzname des Moduls lauten Einstellungen.; Hinweis: Das root-config-Paket wird auf der Grundlage des module-short-name-Pakets erstellt. Benennen Sie die module-short-name nicht um und fügen Sie kein Präfix hinzu, sonst können Sie die Anpassungen nicht einsetzen.
--prefix: Der für generierte Komponenten zu verwendende HTML-Selektor. Die Standardeinstellung ist buc.
--mode: Setzen Sie diese Option auf vor Ort um Code zu generieren, der anwendbar ist für Order Hub der nächsten Generation.

Sehen Sie sich das folgende Beispiel für die Ausführung des Befehls an, mit dem die Angular-Anwendung erstellt wird.

ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem

Notiz: Wenn ein Fehler ähnlich der folgenden Meldung auftritt, können Sie den Fehler bedenkenlos ignorieren. Diese Fehler betreffen nicht die Symbole, die verwendet werden von Bestellzentrale.

Fehler: Einstiegspunkt @carbon/icons-angular/ konnte nicht kompiliert werden.

Wenn Order Hub der nächsten Generation Container derzeit nicht ausgeführt werden, wechseln Sie zudevtoolkit_docker/compose Verzeichnis und führen Sie den folgenden Befehl aus.

./om-compose.sh start orderhub

Erstellen Sie die lokale Entwicklungsversion desfeatures.json Datei. Informationen finden Sie unter Erstellen der features.json-Dateien.
Um Ihre neue Anwendung lokal zu testen, kopieren Sie diefeatures.json Datei in dieom-orderhub-base Container, indem Sie die folgenden Befehle ausführen.

docker exec om-orderhub-base bash -c 'mkdir -p /opt/app-root/src/shell-ui/assets/custom'

docker cp <orderhub-code>/shell-ui/assets/dev/. om-orderhub-base:/opt/app-root/src/shell-ui/assets/custom/

Starten Sie den Server, indem Sie den folgenden Befehl eingeben.

yarn start --host=localhost

Notiz: Sie sehen die folgende Meldung.

"** Angular Live Development Server lauscht auf localhost:<port>, 
Öffnen Sie Ihren Browser auf https://localhost:<Port>/<Modul>/<Route> **"

Diese Nachricht können Sie ignorieren.

Fügen Sie Text hinzu, den Sie in Ihrer neuen Anwendung anzeigen möchten, indem Sie densrc/app/app.component.html Datei. Zum Beispiel, um hinzuzufügenHello, World!, verwenden Sie den folgenden Code.


<div class="app-root-custom-angularrepo">
	<div class="app-region-body">
		<div class="app-body-content" *ngIf="isBucTenantChangeSuccess || isBucJwtRefreshSuccess">
			<router-outlet></router-outlet>
		</div>
		<div *ngIf="isInitialState" class="app-loading">
			<div ibmCol>
				<buc-loading [isActive]="isInitialState"></buc-loading>
			</div>
		</div>

Hello World!

	</div>
</div>

Um das selbstsignierte Zertifikat im Webbrowser zu akzeptieren, öffnen Sie in einem Browser eine Registerkarte, umhttps://localhost:4000 und akzeptieren Sie das Zertifikat. Der Hafen 4000 ist der Wert, der in derng serve Skript impackage.json Datei.

Notiz: Um das Zertifikat zu akzeptieren, ist es nunhttps://localhost:4000 anstatthttps://bucgenerichost:4000 .

Start Order Hub der nächsten Generation indem Sie in einem Browser eine Registerkarte öffnen,https://localhost:7443/order-management . Der Standardport ist 7443. Wenn Sie dieOH_BASE_HTTPS_PORT Eigentum in derdevtoolkit_docker/compose/om-compose.properties Datei, verwenden Sie diese Portnummer.
Klicken Sie in der linken Menünavigation auf Ihren neuen Menüpunkt.