如何提供一个Angular 2 dist文件夹下的index.html文件

Question

我正在使用这个 Angular 4 种子应用程序：https://github.com/2sic/app-tutorial-angular4-hello-dnn。

它使用 webpack 并且工作良好。

它似乎只提供 dev 文件而不是 dist/ 文件夹。

我想要 ng serve dist 文件夹。

不确定应该使用哪个命令，或者是否需要安装轻量级服务器之类的东西。 我运行此命令以创建 dist 文件夹（正常工作）：

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

现在我想要在浏览器中运行这个构建。

- AngularM

---

我是Angular4的新手，能告诉我dist和build是什么吗？ - Soumya Gangamwar

@SoumyaGangamwar 如果你想构建一个可以从localhost之外部署和访问的环境，你可以将编译后的源代码放入一个名为“dist”（分发）的文件夹中 - 然后由http服务器提供服务并传播到“外部”世界。而dist只是为此目的广泛使用的默认名称... - Guntram

以下堆栈网址可能有帮助 https://dev59.com/qlcP5IYBdhLWcg3wY5GJ#53300931 - Shridhar Sagari

@Guntram：这正是我想做的（使其在本地主机之外可访问）。我该如何指定IP和端口？ - Cleb

node_modules\.bin\ng serve --port 4200 --base-href /my-app/ --host 0.0.0.0 执行标准服务，而主机0000使得所提供的应用程序可以从另一台计算机访问网络。(ip是您计算机的ip) - Guntram

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

- Noor Ahmed

---

谢谢，一直在寻找测试我的应用程序构建的方法。我知道我可能需要在服务器上运行构建，但无法在任何地方找到相关信息。这需要在谷歌排名中提高。 - Madmenyo

Answer 2

至少对于Angular应用程序而言，angular-http-server似乎是更好的选择。

首先使用您喜欢的软件包管理器（比如说）安装它：

npm install angular-http-server -g

或者

yarn global add angular-http-server

然后执行它：

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

查看repo以获取更多关于使用的信息。

附言：根据作者的说法，它也应该适用于其他SPA框架（React、Vue等）。

附言：请不要在生产环境中使用angular-http-server，仅将此解决方案用于测试目的。

- rsenna

---

使用 angular-http-server 服务器解决了我在 https://stackoverflow.com/questions/52786539/all-requests-are-not-found-404-when-the-application-runs-on-an-external-server/52786726 中描述的问题。 - Stephane

@Stephane 我很高兴能帮到你！ - rsenna

我该如何指定IP地址，例如 http://0.0.0.0；端口可以通过 -p 标志完成。 - Cleb

注意：我想知道 angular-http-server 与 http-server 的区别。https://www.npmjs.com/package/angular-http-server 表示只能用作开发服务器，不应该用于生产环境；而 https://www.npmjs.com/package/http-server 则声称 http-server 可以用于生产。也可以使用 nginx（参见 https://medium.com/bb-tutorials-and-thoughts/how-to-serve-angular-application-with-nginx-and-docker-3af45be5b854） - JohnLBevan

@JohnLBevan 很好的观点。当我发布这个答案时，我假设 OP 只想要一个开发解决方案 - 在下面另一个答案的评论中，OP 说“我想要测试dist文件夹”。就像你所说的，我在这里描述的过程不应该用于生产。 - rsenna

Answer 3

你需要一个服务器来提供生成的构建文件。

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

npm install -g http-server

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

http-server

如下所示：

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

- Deepak Kumar

Answer 4

一点小建议：

为了避免全局安装，请在您的根目录中进行安装。

npm i http-server

在你的 package.json 文件中

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

than

npm run pwa 

- Whisher

Answer 5

我使用 VS Code 扩展程序 Live Server。

1. 运行 ng build，将会生成位于 dist/ 文件夹内的 index.html 文件。
2. 在另一个 VS Code 实例中打开 dist/ 文件夹。
3. 安装 Live Server 扩展程序后，点击 VS Code 状态栏右下角的 "Go Live" 按钮 即可启动 Live Server。

- FirstVertex

Answer 6

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

ng serve --prod=true

当为true时，将构建配置设置为生产目标。所有构建都使用捆绑和有限的树摇晃。生产构建还会运行有限的死代码消除。

https://angular.io/cli/serve

- Bill

---

--prod选项将编译文件并从流中运行，而不是从文件夹/dist中运行。 - Biruel Rick

Answer 7

您无需安装任何东西，只需使用以下命令即可。

npx lite-server --baseDir="dist/"

- Kalmuraee

---

请在您的回答中提供更多细节。目前的写法让人难以理解您的解决方案。 - Community

Answer 8

我尝试通过全局安装http-server来使用它。

npm install -g http-server

然后移动到 dist/project 文件夹并尝试使用

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"

这个解决方案的所有步骤都相同，只需使用 angular-http-server 而不是 http-server 即可。

对我来说有效。

- UniCoder

Answer 9

ng serve会像平常一样工作，不需要先进行构建。它会在内存中生成文件，并具有一些额外的功能，如自动重新加载。

- Tatsuyuki Ishi

---

嗨，我已经成功运行了ng serve，但它正在提供开发文件而不是dist文件夹。我想使用serve测试dist文件夹。那么命令是什么？ - AngularM

angular-cli做不到这一点。您需要一个即时或生产级别的静态服务器。 - Tatsuyuki Ishi

你知道我可以安装哪些吗？ - AngularM

https://dev59.com/7WQo5IYBdhLWcg3wE8C2 - Tatsuyuki Ishi

问题很清楚，这个答案并没有回答它。应该是一个评论。 - rsenna

Answer 10

将此全局安装（或本地安装）

npm i -g lite-server

运行此命令（替换 project-name）

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

- tottomotto