Question

我有一个Angular 5项目，并且在运行ng serve时工作正常，但我想将其发送给设计人员以进一步进行处理。运行ng build后，打开index.html会导致页面完全空白。

还有其他需要做的事情吗？在我的environment.ts文件夹中，我的生产设置为true。请让我知道是否有一种更简单的方法来发送模拟或如何修复该模拟，谢谢！

Answer 1

最有可能是<base href="">设置。假设我们有一个名为angular cli的项目，名为“ foo”。默认情况下，当我们运行ng build --prod时，Angular将输出dist/foo而没有任何终端错误。两件事：

这需要放在服务器上，而仅打开index.html不能正常工作。
我们的<base href="">需要反映如何将其放置在服务器上（即，在服务器上的其他项目/目录旁边添加“ foo”文件夹或将foo的所有内容转储到服务器的根目录中）。

因此，对于我们的示例，假设我们要将“ foo”目录复制到其他项目的本地服务器（如mamp / wamp）。我们做到了，转到localhost / foo和voila！仍然是空白页。如果您查看（Chrome的）开发人员控制台，很可能会看到404缺少样式/ js。打开索引文件，将<base href="/">更改为<base href="/foo/">，现在它应该可以正常显示了。您还可以按原样保留<base href="/">并将'foo'标记在所有引发错误的css / js文件路径上，并且它将起作用。

现在我们知道问题所在了，我们如何在项目中进行设置？在项目的根目录中，我们打开angular.json（NG6）并修改此位以添加baseHref和deployUrl键/值：

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref" : "/foo/",
        "deployUrl": "/foo/",

现在，当我们保存并执行另一个构建，并替换服务器上的先前构建时，一切都会显示出来。您也可以在构建时使用标志进行设置。从文档中：

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/

Answer 2

简单的技巧就是从 index.html 的 <base href="/"> 行中删除 / 将行 <base href="/"> 更改为 <base href="">

Answer 3

项目中的

index.html不是您在服务器上实际部署的index.html。您必须使用ng build --prod生成要部署在Web服务器中的文件。

但是，即使您构建生产文件，您的设计器仍然无法使用生成的index.html和其他js文件执行任何操作。最好的办法是将整个项目交给设计师，并教他/她如何使用ng serve

运行ng build时，index.html什么都不做？

3 个答案: