13

我有一个 Angular 5 项目，它在运行 ng serve 时运行良好，但我想将它发送给设计师以进一步处理它。运行 ng build 后，打开 index.html 会导致页面完全空白。

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

4

3 回答 3

22

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

  1. 这需要放在服务器上，并且不能通过简单地打开 index.html 来工作。

  2. 我们<base href="">需要反映这是如何放在服务器上的（即，将“foo”文件夹与服务器上的其他项目/目录一起添加或将 foo 的所有内容转储到服务器的根目录中）。

因此，对于我们的示例，假设我们要将“foo”目录复制到本地服务器上，例如 mamp/wamp 与其他项目。我们这样做，去 localhost/foo 瞧！还是空白页。如果您查看（Chrome 的）开发控制台，您很可能会看到缺少样式/js 的 404。打开索引文件并将其更改<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/
于 2018-10-04T19:26:24.597 回答
8

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

于 2021-02-12T22:55:38.353 回答
1

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

但是，即使您构建了生产文件，您的设计师仍然无法对生成的 index.html 和其他 js 文件做任何事情。最好的事情是，将整个项目交给设计师并教他/她如何运行它ng serve

于 2018-08-07T02:46:20.157 回答