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

Question

我在运行 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未找到错误？

我想从C：\ Source \ angular>运行angularbuild文件夹中放置的dist文件夹。请告诉我正确的方法。

- k11k2

Answer 1

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

http-server ./dist

对于使用Wamp或Xamp的用户，可以将dist文件夹中的所有文件复制到您的www文件夹中，然后重新启动Apache服务。

- getName

Answer 2

Dist文件夹不适用于ng serve命令。

这是一个可以在没有ng命令的情况下运行的构建版本。

ng build :

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

因此，无需在“dist”文件夹中运行ng serve，

只需打开“dist”文件夹内的index.html文件，整个项目即可运行。

- Vivek Doshi

---

如果您将Angular4的dist目录部署到/test上的Web服务器上，则可以按以下方式构建它： - Rob Lassche

像 main.xxxxxxxxxxxxxxx.js 这样的 dist 文件夹的内容能够被编辑吗？ - T. Shashwat

可以，但最好不要 :) @T.Shashwat - Vivek Doshi

实际上，我尝试编辑我的main.XXXXXXX.js文件，但徒劳无功，因为文件被压缩了，不会捕捉到您所做的更改。 所以，我尝试在源代码上进行操作，并重新构建项目。之后，我只需将main.xxxxxxxx.js重命名为之前的文件(main.xxxxxxxxx.js)，该文件位于我的共享托管提供商（Hosgator）上。然后，我可以看到更改反映在我的实时网站上。 - T. Shashwat

Angular 6 到了。我的项目没有启动。我双击 index.html，但控制台中显示许多“无法加载资源：net::ERR_FILE_NOT_FOUND”的错误，例如favicon、我的运行时和polyfills JS文件等等... - Kurt Miller

@KurtMiller也许这个链接可以帮到你：link - k11k2

Answer 3

如果您要将angular4项目部署到名为DOCUMENT_ROOT/test的子文件夹下的web服务器上，则可以按照以下方式进行构建：

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

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

通过http://myserver/test访问应用程序。 在我这里可行。

- Rob Lassche

---

确实，所以生产环境的人不要忘记使用 --prod 标志。感谢分享。 - Melroy van den Berg

Answer 4

创建构建的步骤是：

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

为了提供由angular-cli ng build命令创建的/dist文件夹，我们可以使用 "serve"，使用以下命令安装serve。

> yarn global add serve

和运行

serve dist/

你将获得URL并在任何浏览器上尝试它。

- Shridhar Sagari

---

太棒了，谢谢！在我的情况下，我必须使用 npx serve dist。 - amicoderozer