[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
質問
Angularのドキュメントによると、Angularを使うには
--base-href
パラメータを使うべきであるとドキュメントに書かれています。
サーバーのサブフォルダーにファイルをコピーする場合は、ビルドフラグを付加します。
--base-href
を設定し<base href>
を適切に設定します。例えば
index.html
がサーバ上で/my/app/index.html
, に設定し、ベースとなる href を<base href="/my/app/">
のようにします。
https://angular.io/guide/deployment
しかし、angular-cliでは
--deploy-url
というパラメータがあります。ツールのドキュメントでは、次のように記述されています。
ファイルが配置されるURL。
https://github.com/angular/angular-cli/wiki/build
を使用するソリューションを見たことがあります。
--deploy-url
の代わりに
--base-href
に変更する必要があります。
#質問#
との違いは何ですか?
--base-href
と
--deploy-url
というパラメータがあります。それぞれをいつ使えばいいのでしょうか?
どのように解決するのですか?
ここにある回答は、完全に正確ではなく、時代遅れで、完全な説明を与えるものではありません。
それぞれいつ使えばいいのですか?
tl;dr
一般的な使い方
--base-href
というのは
--deploy-url
- はAngular v13で非推奨となりました。
- はビルド速度を低下させます(ただし、おそらくあまり重要ではありません)。
-
の利点はありません。
base href
で "相対テンプレート (HTML) アセットの位置決め、および相対フェッチ/XMLHttpRequests."
アセットが配置されている場所と異なる URL が必要な場合は
公式ドキュメント
を設定することをお勧めします。
APP_BASE_HREF
を手動で設定することを推奨します (例: set
--base-href
を
/public/
であり
APP_BASED_HREF
から
/users/
でAngularファイルを提供する場合は
https://example.com/public/
で配信し、ウェブアプリのURLは
https://example.com/users/
)
とは何が違うのでしょうか?
--base-href
と--deploy-url
のパラメータを指定することができます。
上記ですでに3つの違いを挙げています。
すでに質問で述べているように
--base-href
を設定します。
<base href>
を
index.html
(詳細については
Mozilla のドキュメントを参照してください。
を、意味合いについては
コミュニティ wiki
を参照してください)、一方
--deploy-url
の中の相対リンクのプレフィクスは
index.html
ファイル内の相対リンクに接頭辞を付けます。
例えば、次のような
index.html
のスニペットです。
<link rel="stylesheet" href="styles.HASH.css">
...
<script src="main.HASH.js" type="module"></script>
とは
--deploy-url /public/
と出力されます。
<link rel="stylesheet" href="/public/styles.HASH.css">
...
<script src="/public/main.HASH.js" type="module"></script>
--deploy-url
は文字通りリンクの前に付けるだけのようなので、もし代わりに
--deploy-url public
とすると、出力はかなり使い物にならないでしょう。
<link rel="stylesheet" href="publicstyles.HASH.css">
...
<script src="publicmain.HASH.js" type="module"></script>
最後に、アセットへの相対リンクを使用するテンプレート(HTML)がある場合、例えば
header.component.html
を含む
<img src="assets/logo.jpg">
を含むが
--deploy-url /public/
を使用した場合、リンクに接頭辞が付かないため、画像が壊れてしまいます。この場合、代わりに
<base href="/public/">
を使って設定するとうまくいきます。
--base-href /public/
.
関連
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】angular-cliプロジェクトにbootstrapを追加する方法
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] 角度2 ngfor 最初、最後、インデックスループ
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] htmlの<base>タグの推奨事項を教えてください。
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] ng serve がファイルの変更を自動的に検出しない
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] formControlNameとFormControlの違いは何ですか?
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)