web-dev-qa-db-ja.com

Angular 2 distフォルダーindex.htmlを提供する方法

このangular 4シードアプリを使用しています： https://github.com/2sic/app-tutorial-angular4-hello-dnn

それはwebpackを使用し、正常に動作します。

Devファイルのみを提供し、dist /フォルダは提供しないようです。

Distフォルダーを提供したい。

これを行うためのコマンドがわからない、またはライトサーバーなどをインストールする必要があるかどうか。

このコマンドを実行して、distフォルダーを作成します（正常に機能します）：

g build --prod --aot --output-hashing=none

ここで、このビルドをブラウザーで実行したいと思います。

angularwebpackwebpack-dev-server
26
AngularM

そのためにhttp-serverを使用できます。まず、コマンドng build --prod --aot --output-hashing=noneを使用してビルドを生成します。これにより、ディレクトリ構造にdistフォルダーが作成されます。

この後、http-server ./distを実行します。これにより、distフォルダーからプロジェクトの提供が開始されます。

を使用してhttp-serverがグローバルにインストールされていることを確認してください

npm install http-server -g

参照については、 https://www.npmjs.com/package/http-server を参照してください

49
Noor Ahmed

少なくともAngularアプリの場合、angular-http-serverの方が適しているようです。

最初にそれをインストールします

npm install angular-http-server -g # or yarn global add angular-http-server

それから実行します：

angular-http-server --path path/to/dist/folder

使用法の詳細については、 repo をご覧ください。

PS：著者によると、他のSPAフレームワーク（React、Vueなど）でも動作するはずです。

14
rsenna

生成されたビルドを提供するサーバーが必要です。

Http-serverを使用しています。以下を使用してhttp-serverをインストールします。

npm install -g http-server

distフォルダー内に移動して、このコマンドを実行します

http-server

ここに示すように：

enter image description here

ブラウザで http：// localhost：808 を確認します

14
Deepak Kumar

ちょっとしたヒント

したがって、グローバルにインストールすることを避けます

ルートにインストールする

npm i http-server

package.jsonで

"scripts": {
    "pwa": "http-server ./dist"
  }

より

npm run pwa
2
Whisher

Angular CLIでdistフォルダーを提供します...

ng serve --prod = true

Trueの場合、ビルド構成を実動ターゲットに設定します。すべてのビルドは、バンドルと限定的なツリーシェーキングを利用します。また、実動ビルドでは、限定されたデッドコードの除去が実行されます。

https://angular.io/cli/serve

2
Bill

ng serveは通常どおり動作し、事前のビルドは必要ありません。メモリ内にファイルを生成し、自動リロードなどの追加機能を備えています。

1
Tatsuyuki Ishi

グローバルにインストールしてhttp-serverで試しました

npm install -g http-server

次に、dist/project-folderに移動して、

http-server -o

コンソールでの出力

[Fri Sep 13 2019 15:19:57 GMT+0530 (India Standard Time)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132
Safari/537.36"

次に、このソリューションはすべてのステップで同じように機能しましたが、http-server try angular-http-serverを使用する代わりに

それは私のために働いた。

0
UniCoder