Angular 5 个应用未显示在 Github 页面上

Question

我使用 CLI 创建了默认的 Angular 应用，如下所示：

ng new ng-test-deploy

测试将虚拟应用程序部署到 Github 页面。我运行通过 here 定义的程序，总而言之，它是这样做的：

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"
angular-cli-ghpages

之后我访问了该页面并收到了一个空白页面。在控制台中有多个关于加载文件的错误：

如果我检查 url 说 main.bundle.js 我可以看到路径指向 https://katana24.github.io/main.3188de4880a80d258168.bundle.js 而我可以通过将回购名称添加到 url 中来加载它，如下所示： https://katana24.github.io/ng-test-edeploy/main.3188de4880a80d258168.bundle.js

我是不是弄错了一步？

之前的回答建议删除 base-href="..." 值，但这对我来说没有意义。那么如何让它在正确的位置显示呢？

Answer 1

<base href="/ng-test-deploy/">

这不仅是加载脚本和样式所必需的，也是路由器正常工作所必需的。

Answer 2

感谢@ochs.tobi 和@funkizer 的帮助。所以是的，base href 对项目来说是不正确的。

我要做的第一件事是将 index.html 中的 href 更新为我的项目名称。

之后我需要为生产环境重建应用程序并且只有项目名称为 href:

 ng build --prod --base-href "ng-test-deploy"

然后导航到该站点，大约 30 秒后，显示了我想要的内容。

编辑

在进一步调查之后，我觉得这是一个更好的选择。在 angular-cli.json 中，您可以为不同的目的定义不同的应用程序 - 也许一个用于生产、暂存等。像这样：

"apps": [
    { 
      "name": "app-dev",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "app-production",
      "baseHref": "/ng-test-deploy",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

在这些对象中的每一个中，您都可以看到 base-href 到您喜欢的任何对象。然后构建它，在本例中为 app-production 应用程序，请执行以下操作：

ng build --prod --base-href "ng-test-deploy" --app app-production

这将根据其 href 构建用于生产的目标应用程序。遗漏上面的基本 href 标记会导致与我上面描述的相同的错误，并且是必需的。

Angular 5 个应用未显示在 Github 页面上

Angular 5 app not displaying on Github pages

github-pages

angular

angular-cli-ghpages