如何提供Angular 2 dist文件夹index.html

Question

我正在使用这个有角度的4种子应用：https://github.com/2sic/app-tutorial-angular4-hello-dnn

它使用webpack并且工作正常。

它似乎只提供开发文件，而不是dist /文件夹。

我想要提供dist文件夹。

不确定执行此操作的命令，或者我是否需要安装精简版服务器。

我运行此命令来创建dist文件夹（工作正常）：

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

现在我想在浏览器中运行此版本。

Answer 1

您可以使用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

Answer 2

您需要一台服务器来为您生成的版本提供服务。

我正在使用http-server。使用以下命令安装http-server：

npm install -g http-server

现在进入你的dist文件夹并运行此命令

http-server

如下所示：

在浏览器中查看http://localhost:8080

Answer 3

至少对于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等）一起使用。

Answer 4

一些提示

所以你要避免全局安装

在根目录中安装

npm i http-server

你的package.json

中的

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

大于

npm run pwa 

Answer 5

ng serve将正常工作，并且不需要事先构建。它在内存中生成文件，并具有一些其他功能，如自动重新加载。

Answer 6

我使用Angular CLI服务dist文件夹...

ng serve --prod = true

  

为true时，将构建配置设置为生产目标。所有建筑都使用捆绑和有限的摇树。生产版本还可以消除有限的死代码。

https://angular.io/cli/serve

Answer 7

我使用VS代码扩展名Live Server。

1. 运行您的ng build，它将与dist/一起输出index.html文件夹
2. 将VS Code的单独实例打开到dist/文件夹中
3. 在安装Live Server扩展程序后，按VS代码状态栏右下角的“ Go Live”按钮。

Answer 8

我尝试通过全局安装http服务器

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尝试angular-http-server

对我有用。

Answer 9

全局（或本地）安装此

npm i -g lite-server

运行此命令（替换项目名称）

lite-server --baseDir="dist/project-name"