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

Posted 2023-03-04

【中文标题】如何提供 Angular 2 dist 文件夹 index.html

【英文标题】：How to serve an Angular 2 dist folder index.html

【发布时间】：2017-09-09 09:57:37

【问题描述】：

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

它使用 webpack 并且工作正常。

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

我想为 dist 文件夹服务。

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

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

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

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

【问题讨论】：

我是 angular4 的新手，请问我知道什么是 dist, build

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

下面的堆栈网址可能会有所帮助***.com/a/53300931/7165958

@Guntram：这正是我想做的（让它在本地主机之外访问）。如何指定 IP 和端口？

node_modules\.bin\ng serve --port 4200 --base-href /my-app/ --host 0.0.0.0 提供标准服务，主机 0000 使服务的应用程序可以从另一台计算机访问网络。 （ip是你电脑的ip）

【参考方案1】：

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

【讨论】：

嗨，我有 ng serve 工作，但它提供的是 dev 文件，而不是那个 dist 文件夹。我想使用 serve 测试 dist 文件夹。那个命令是什么？

angular-cli 无法做到这一点。您需要一个即时或生产级静态服务器。

你知道我可以安装什么吗？

***.com/questions/16333790/…

问题很清楚，这个答案没有回答。应该是评论。

【参考方案2】：

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

【讨论】：

谢谢，一直在寻找测试我的应用程序构建。我知道我可能需要在服务器上运行构建，但在任何地方都找不到这方面的信息。这需要推到更高的谷歌排名。

【参考方案3】：

您需要一个服务器来为您生成的构建提供服务。

我正在使用 http-server。使用以下方式安装 http-server：

npm install -g http-server

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

http-server

如图所示：

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

【参考方案4】：

小贴士

所以你避免全局安装

安装在你的根目录

npm i http-server

在你的 package.json 中

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

比

npm run pwa 

【参考方案5】：

至少对于 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 了解更多关于使用的信息。

PS：根据作者的说法，它还应该与其他 SPA 框架（React、Vue 等）一起使用。

PPS：不要不要将angular-http-server 用于生产，仅将此解决方案用于测试目的。

【讨论】：

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

@Stephane 很高兴它有帮助！

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

注意：我想知道angular-http-server vs http-server 规则是什么。 npmjs.com/package/angular-http-server 表示 angular-http-server 不应用作生产服务器；只为发展；而npmjs.com/package/http-server 声称http-server 可用于生产。也可以使用nginx（见medium.com/bb-tutorials-and-thoughts/…）

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

【参考方案6】：

我使用 Angular CLI 提供 dist 文件夹...

ng 服务 --prod=true

当为 true 时，将构建配置设置为生产目标。所有构建都使用捆绑和有限的 tree-shaking。生产版本还运行有限的死代码消除。

https://angular.io/cli/serve

【讨论】：

--prod 选项将编译文件并从流而不是从文件夹 /dist 运行它

【参考方案7】：

我尝试通过全局安装 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，而是尝试angular-http-server

它对我有用。

【参考方案8】：

我使用 VS Code 扩展 Live Server。

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

【参考方案9】：

全局（或本地）安装

npm i -g lite-server

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

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

【参考方案10】：

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

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

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。