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找不到错误

我怎么能实现它？我想运行位于C:\Source\angular>

的angularbuild文件夹中的dist文件夹

让我知道正确的方法。

Answer 1

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

<div class="row">

  <div class="col-12">


    <div class="row no-gutters">

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">1</li>
            <li class="d-inline-block">2</li>
          </ul>
        </div>

      </div>

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
          </ul>
        </div>

      </div>

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
            <li class="d-inline-block">44</li>
          </ul>
        </div>

      </div>

    </div>


  </div>

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

Answer 2

Dist文件夹不适用于ng服务

  

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

ng build :

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

因此无需在dist文件夹上运行ng serve，

  

只需在dist文件夹和整个项目中打开index.html文件即可   会跑。

Answer 3

如果您将web服务器上的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生成命令创建的/ dist文件夹，我们可以使用“ serve” 使用下面的命令来安装serve

> yarn global add serve

然后运行

serve dist/

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