Angular 2 CLI - 如何使用由 angular-cli ng build 创建的 /dist 文件夹文件答案

【问题标题】：Angular 2 CLI - How to use /dist folder files created by angular-cli ng buildAngular 2 CLI - 如何使用由 angular-cli ng build 创建的 /dist 文件夹文件
【发布时间】：2017-11-12 06:01:22
【问题描述】：

我在 ng build 后生成 dist 文件夹，我的目录看起来像

C:\Source\angular> ng build

剪切并过去另一个目录中的 dist 文件夹

C:\ReSource\angularbuild

在Index.html中更改为

<base href="./ReSource/angularbuild/dist">

然后

C:\Source\angular> ng serve

获取 inline.bundle.js,main.bundle.js,styles.bundle.js,vendor.bundle.js,main.bundle.js 404 not found 错误

我怎样才能实现它？我想从C:\Source\angular>运行放置在angularbuild文件夹中的dist文件夹

告诉我正确的做法。

【问题讨论】：

标签： angular

【解决方案1】：

在 ng build 之后，它只需要一个服务器来执行它，而不是 ng serve 你可以从你的终端 npm i -g http-server --save 安装一个 http-server 然后使用命令 (y) 从 dist 文件夹执行你的项目：

http-server ./dist

或者在 apache 上，例如使用 Wamp 或 Xamp 的人只需复制 www 文件夹内 dist 文件夹中的整个文件，然后重新启动 Apache 服务

【讨论】：

【解决方案2】：

Dist 文件夹不适用于 ng serve

这是一个无需 ng 命令即可运行的构建

ng build :

它创建您的项目的构建，将您所有的“.ts 文件”和其他文件转换为浏览器可以理解的简单 js 文件。

所以不需要在 dist 文件夹上运行ng serve，

只需打开 dist 文件夹和整个项目中的 index.html 文件将运行。

【讨论】：

如果您将网络服务器上的 angular4 dist 目录部署到 /test，那么您可以按如下方式构建它：
可以编辑像main.xxxxxxxxxxxxxxx.js这样的dist文件夹内容吗？
是的，你可以，但你不应该:) @T.Shashwat
实际上我尝试编辑我的 main.XXXXXXX.js 但徒劳无功，因为文件被压缩并且无法赶上您所做的更改。因此，我尝试处理我的源代码并再次构建项目，之后我将 main.xxxxxxxx.js 重命名为我的共享托管服务提供商（Hosgator）中可用的以前的文件（main.xxxxxxxxx.js）。我可以看到我的实时网站中反映的变化。
这里是 Angular 6。我没有启动该项目。我双击了index.html，但我在控制台中获得了很多Failed to load resource: net::ERR_FILE_NOT_FOUND 用于网站图标、我的运行时和polyfills JS 文件等...

【解决方案3】：

如果您将 angular4 项目部署在您的网络服务器上到子文件夹 DOCUMENT_ROOT/test，那么您可以按如下方式进行构建：

ng build --prod --base-href "/test/"。

将 dist/* 文件复制到 DOCUMENT_ROOT/test。

通过以下方式访问应用程序：http://myserver/test。这对我有用。

【讨论】：

确实如此，所以不要忘记生产人员的--prod 标志。感谢分享。

【解决方案4】：

创建构建的步骤是

> ng build --prod // can be other environment

要为 angular-cli ng build 命令创建的 /dist 文件夹提供服务，我们可以使用“serve” 使用以下命令安装服务

> yarn global add serve

然后运行

serve dist/

您将获得 url 并在任何浏览器上尝试。

【讨论】：

这太棒了，谢谢！就我而言，我不得不使用npx serve dist