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

Question

我在构建之后生成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找不到错误

我怎么能实现它？ 我想运行dist文件夹，它位于C:\\Source\\angular> angularbuild文件夹中

让我知道正确的方法。

Answer 1

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

http-server ./dist

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

Answer 2

Dist文件夹不适用于ng服务

它是一个可以在没有ng命令的情况下运行的构建

ng build :

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

所以没有必要在dist文件夹上运行ng serve ，

只需在dist文件夹中打开index.html文件，您的整个项目就会运行。

Answer 3

如果将webserver上的angular4项目部署到子文件夹DOCUMENT_ROOT / test，则可以按如下方式进行构建：

ng build --prod --base-href“/ test /”。

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

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

Answer 4

创建构建的步骤是

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

要通过angular-cli ng build命令创建的serve / dist文件夹，我们可以使用“ serve ”使用下面的命令来安装serve

> yarn global add serve

并运行

serve dist/

你会得到网址并在任何浏览器上尝试。