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

Question

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

它使用webpack并且工作正常.

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

我想要提供dist文件夹.

不确定执行此操作的命令,或者我是否需要安装lite服务器或其他东西.

我运行此命令来创建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

至少对于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

查看仓库以获取有关使用情况的更多信息.

PS:据作者说,它也应该与其他SPA框架(React,Vue等)一起使用.

Answer 3

您需要一台服务器来提供生成的构建.

我正在使用http-server.使用以下命令安装http-server:

npm install -g http-server

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

http-server

如下图所示:

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

Answer 4

一些小技巧

这样你就可以避免全局安装

安装在你的根目录中

npm i http-server

在你的 package.json 中

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

比

npm run pwa 

Answer 5

我使用 VS Code 扩展Live Server。

1. 运行你的ng build它将输出dist/文件夹index.html
2. dist/在文件夹中打开 VS Code 的单独实例
3. 按 VS Code 状态栏右下角的“上线”按钮安装 Live Server 扩展后您将看到它。

Answer 6

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