Angular 5应用程序未显示在Github页面上 [英] Angular 5 app not displaying on Github pages

问题描述

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

I created the default Angular app using the CLI like so:

ng new ng-test-deploy

测试将虚拟应用程序部署到Github页面. 我按照此处定义的过程进行了操作，以总结一下，该操作:

to test out deploying a dummy app to Github pages. I ran through the procedure as defined here which, to summarise, does this:

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

这样做之后，我访问了该页面并收到一个空白页面.在控制台中，与加载文件有关的多个错误:

After doing that I visited the page and receive a blank page. In the console there are multiple errors regarding loading the files:

如果我检查说main.bundle.js的网址，我可以看到路径指向 https://katana24.github.io/ng-test-edeploy/main.3188de4880a80d258168.bundle.js

If i check the url of say the main.bundle.js I can see that the path is pointing to https://katana24.github.io/main.3188de4880a80d258168.bundle.js whereas I can load it by adding the repo name into the url like so: https://katana24.github.io/ng-test-edeploy/main.3188de4880a80d258168.bundle.js

我搞砸了吗?

先前的问题'答案建议删除base-href="..."值，但这对我来说没有意义.那么如何使它在正确的位置显示?

A previous questions' answer suggested removing the base-href="..." value but this doesn't make sense to me. So how do I get it to look in the right places?

推荐答案

请同时向@ ochs.tobi和@funkizer寻求帮助.因此，是的，base href对于该项目是不正确的.

Credit to both @ochs.tobi and @funkizer for their help. So yes, the base href was incorrect for the project.

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

First thing I had to do was to update the href in the index.html to the name of my project.

此后，我需要为生产环境重建应用程序，并且仅将项目名称作为href:

After that I needed to rebuild the application for a production environment and only have the project name as the href:

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

然后说了30秒，然后导航到该网站，显示了我所追求的.

Then navigating to the site, after say 30 seconds, displayed what I was after.

编辑

进一步研究之后，我觉得这是一个更好的选择.在angular-cli.json内部，您可以出于不同目的定义不同的应用程序-也许是用于生产，登台等的应用程序.

After investigating this some more I feel this is a better option. Inside of the angular-cli.json you can define different apps for different purposes - perhaps one for production, staging etc. Like so:

"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应用)中，执行以下操作:

Inside each of these objects you can see the base-href to whatever you like. Then to build it out, in this case the app-production app, do this:

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

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

Which will build the target app for production based on its href. Leaving out the base href tag above resulted in the same error as I described above and is needed.

这篇关于Angular 5应用程序未显示在Github页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！