Angular 5 app不会显示在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

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

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

我搞砸了一步吗？

之前的questions'回答建议删除base-href="..."值，但这对我没有意义。那么如何才能让它在正确的位置找到它？

Answer 1

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

这不仅需要加载脚本和样式，还需要路由器正常工作。

Answer 2

同意@ ochs.tobi和@funkizer的帮助。所以是的，base href对于项目是不正确的。

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

之后，我需要重建生产环境的应用程序，并且只将项目名称设为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标签导致了与我上面描述的相同的错误，并且是必需的。