web-dev-qa-db-ja.com

ng buildを実行すると、index.htmlは何もしませんか？

Angular 5プロジェクトがあり、ngserveを実行すると正常に動作しますが、デザイナーに送信してさらに作業を進めたいと思います。ngbuildを実行した後、index.htmlを開きます。完全に空白のページになります。

他に何かする必要がありますか？私のenvironment.tsフォルダーでは、本番環境をtrueに設定しています。シミュレーションを送信する簡単な方法や、これを修正する方法があるかどうかを教えてください。ありがとうございます。

htmlangularng-build
4
Betzel11

ほとんどの場合、それは<base href="">設定です。 「foo」と呼ばれるangular-cliで作成されたプロジェクトがあるとしましょう。 ng build --prodを実行すると、デフォルトでAngularはターミナルエラーなしでdist/fooを出力します。いくつかのことがあります。

  1. これはサーバーに配置する必要があり、index.htmlを開くだけでは機能しません。

  2. <base href="">は、これがサーバーにどのように配置されているかを反映する必要があります（つまり、サーバー上の他のプロジェクト/ディレクトリと一緒に「foo」フォルダーを追加するか、サーバーのルートにfooのすべてのコンテンツをダンプします）。

したがって、この例では、他のプロジェクトで「foo」ディレクトリをmamp/wampなどのローカルサーバーにコピーするとします。それを行います。localhost/ fooに移動して出来上がりです。まだ空白のページ。 （Chromeの）開発コンソールを見ると、スタイル/ jsが欠落している404が表示される可能性があります。インデックスファイルを開き、<base href="/">を<base href="/foo/">に変更すると、問題なく表示されるはずです。 <base href="/">をそのままにして、エラーをスローしているすべてのcss/jsファイルパスに「foo」を追加することもできます。

問題が何であるかがわかったので、プロジェクトでこれをどのように設定できますか？プロジェクトのルートで、angular.json（NG6）を開き、このビットを変更してbaseHrefおよびdeployUrlキー/値を追加しましょう。

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref" : "/foo/",
        "deployUrl": "/foo/",

これで、別のビルドを保存して実行し、サーバー上で前のビルドを置き換えると、すべてが表示されるはずです。ビルド時にフラグを使用してこれを設定することもできます。ドキュメントから：

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
7
Pete Ankelein

プロジェクト内のindex.htmlは、サーバーにデプロイする実際のindex.htmlではありません。 ng build --prodを使用して、Webサーバーにデプロイする必要のあるファイルを生成する必要があります。

ただし、本番ファイルをビルドした場合でも、デザイナーは生成されたindex.htmlやその他のjsファイルを使用して何もできません。最良のことは、プロジェクト全体を設計者に渡し、ng serveを使用してプロジェクトを実行する方法を設計者に教えることです。

1
Lahiru Chandima