web-dev-qa-db-ja.com

angularアプリをデプロイして、任意のパスで機​​能するようにするにはどうすればよいですか？

これはおそらく初心者の質問ですが、ここまたはangularドキュメント）で答えを見つけることができませんでした。単純なAngularアプリケーション（ たとえばangular.ioチュートリアルのヒーローエディター 配布したいまだ知らない Webサーバーで実行されるパス。

言い換えると、生成されたソース（index.htmlとそのangular関連するjsファイル））がanyパスで完全に機能する必要があります（それが理由だと思います）相対パスは...）現在、生成されたソースは、サーバーのルートディレクトリに配置した場合にのみ機能します。

<base href="/">

npmdeployはおそらくindex.htmlで生成されました...私はそれを素朴に変更しようとしました

<base href="./">

私のブラウザが含まれているJSファイルのパスをindex.htmlを基準として解釈するためです。これにより、私のブラウザはJSファイルを正しく検出しますが、angularアプリは機能しなくなります（空白ページ...）。
それを行うための適切な「角度のある方法」は何であるかについてのアイデアはありますか？よろしくお願いします！

angulardeploymentweb-deployment
10
xaxa

私のために働いていて、あまり醜く見えない解決策を見つけました：

ng build --base-href "./"
1
xaxa

angular CLIを使用している場合は、：

ng build --base-href /dynamic-base-path/

トリックを行う必要があります。

1
Ismail H

もあります --deploy-urlオプションも。両方を一緒に使用できますが、目的は異なります。

私が知る限り、すべてのdeploy-url switchは、ロードされているすべてのアセットにそのURLを追加します。例えば ​​：

ng build --aot --prod --base-href=/myapp/ --deploy-url=http://cdn.example.com/

これを生成します：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DEFENDER</title>
  <base href="/myapp/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="http://cdn.example.com/styles.7bb5a49e96a80c1bcc2e.css"></head>
<body>
  <rr-root></rr-root>
<script type="text/javascript" src="http://cdn.example.com/runtime.e6ffc49faae27b0b8945.js"></script><script type="text/javascript" src="http://cdn.example.com/polyfills.9a5f6d04e0781d28c53e.js"></script><script type="text/javascript" src="http://cdn.example.com/main.03ca15166b3edeff4ad4.js"></script></body>
</html>

それぞれをいつ使用するかはまだ正確にはわかりませんが、 この男 それらを一緒に使用するとうまくいくことがわかりました:-)

注：アセット（画像など）がどのように処理されるかは正確にはわかりません。これはメインの.jsまたはスタイルファイル専用だと思いますが、現在はテスト目的でこれを行っています。

1
Simon_Weaver

次のいずれかのアプローチを使用できます。

  1. ドメイン内の非ルートパスにデプロイする場合は、dist /index.htmlの<base href="/">タグを手動で更新する必要があります。

    この場合、<base href="/angular2-test/">に更新する必要があると思います。

  2. ng build -prod --base-href \"/mysubfolder/\"は、開発を継続するために、index.htmlのオリジナルを変更せずにサーバーで動作します。ここで結果を見ることができます： http://foobar.cf/calculator
0
Juhil Kamothi