作成次世代オーダーハブ標準のAngularリポジトリを使用するアプリケーション

標準の Angular リポジトリを使用すると、Angular UI アプリケーションに対してよりシンプルで従来的なアプローチが提供されます。 独立した UI アプリケーションを作成し、依存関係やコード共有をあまり行わずに高速にコーディングしたい場合は、このアプローチを使用します。

このタスクについて

この手順では、次世代オーダーハブアプリケーションを作成し、基本的な Angular リポジトリに保存します。

手順

  1. 抽出する次世代オーダーハブコード。 詳細については、カスタマイズを始める次世代オーダーハブ。
    注記：バージョンパラメータはom-compose.sh extract-orderhub-codeコマンドはoms抽出する次世代オーダーハブコード。 バージョンパラメータomoc適用されない次世代オーダーハブ。
  2. コンソールを開いて次世代オーダーハブコードディレクトリ。 デフォルトの場所はdevtoolkit_docker/orderhub-code。
  3. レジストリとのやり取りでSSL検証をバイパスするには、strict-ssl次のコマンドを実行して false に設定します。
    npm config set "strict-ssl" false
  4. 最新バージョンを再インストールする@buc/schematicsアクセスするにはIBM®次のコマンドを実行して、提供された回路図を取得します。

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

  1. 新しいアプリケーション用のフォルダーを作成します。 フォルダーの名前はモジュール名です。
  2. コンソールで、作成したフォルダーに移動します。
  3. 次のコマンドを実行してワークスペースを作成し、新しい Angular アプリケーションを初期化します。

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
注記：のng newコマンドには--mode=on-premパラメータ。
回路図は次のオプションをサポートしています。
--skip-git
このオプションは初期化しませんGitHubリポジトリ。 デフォルトは false です。
--commit
このオプションには初期GitHubリポジトリのコミット情報。 デフォルトは true です。
--module-name
これらの必須オプションはモジュールの名前です。 例えば、 buc-アプリ設定。
--module-short-name
モジュールの短い名前。 モジュール名にダッシュが含まれている場合、短縮名は最後のダッシュの後のテキストにする必要があります。 たとえば、モジュールがbuc-アプリ設定モジュールの短縮名は設定。
注意: root-configパッケージはmodule-short-nameに基づいて生成されます。 module-short-name の名前を変更したり、接頭辞を追加したりしないでください。
--prefix
生成されたコンポーネントに使用する HTML セレクター。 デフォルトはブック。
--mode
このオプションを設定するオンプレミス適用可能なコードを生成する次世代オーダーハブ。
Angular アプリケーションを作成するコマンドを実行する次の例を参照してください。
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem
注記：次のメッセージのようなエラーが発生した場合は、エラーを無視しても問題ありません。 これらのエラーは、注文ハブ。
エラー: エントリポイント @carbon/icons-angular/ のコンパイルに失敗しました

  1. もし次世代オーダーハブコンテナが現在実行されていない場合は、devtoolkit_docker/composeディレクトリに移動し、次のコマンドを実行します。

./om-compose.sh start orderhub

  1. ローカル開発バージョンを作成するfeatures.jsonファイル。 詳しくはfeatures.jsonファイルの作成を参照。
  2. 新しいアプリケーションをローカルでテストするには、features.jsonファイルにom-orderhub-base次のコマンドを実行してコンテナを開きます。

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/

  1. 次のコマンドを入力してサーバーを起動します。

yarn start --host=localhost
注記：次のメッセージが表示されます。
"** Angular Live Development Server は localhost:<port> でリッスンしています。 
ブラウザを開いてhttps://localhost:<ポート>/<モジュール>/<ルート> **"
このメッセージは無視してください。

  1. 新しいアプリケーションに表示したいテキストを追加するには、src/app/app.component.htmlファイル。 例えば、Hello, World!次のコードを使用します。


<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>

  1. ウェブブラウザで自己署名証明書を受け入れるには、ブラウザでタブを開いてhttps://localhost:4000証明書を承認します。 港4000で使用される値ですng serveスクリプトのpackage.jsonファイル。

注記：証明書を承認するには、https://localhost:4000の代わりにhttps://bucgenerichost:4000。

  1. 始める次世代オーダーハブブラウザでタブを開いてhttps://localhost:7443/order-management。 デフォルトのポートは 7443 です。 設定した場合OH_BASE_HTTPS_PORTの財産devtoolkit_docker/compose/om-compose.propertiesファイルの場合は、そのポート番号を使用します。
  2. 左側のメニュー ナビゲーションで新しいメニュー項目をクリックします。