将 Angular 7 个部署到 github 个页面

Question

我有一个简单的 angular7 应用程序，它只有两条主要路线 'article'。如果您在本地测试它，它会起作用，但是当您放置 github 页面时，它只会加载页面的 css。我按照 documentation 中的 angular 文档进行部署，并且还尝试使用 gh-pages 工具。但其中 none 有效。如果我删除我的路线，它将起作用。

这是我在控制台上遇到的错误。

1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'blogfolio'
Error: Cannot match any routes. URL Segment: 'blogfolio'
    at t.noMatchError (main.5443131190bc79920d7b.js:1)
    at e.selector (main.5443131190bc79920d7b.js:1)
  ............

rodnorm.github.io/:1 Failed to load resource: the server responded with a status of 404 ()

这是我的代码：

app.rounting.ts

import { MainComponent } from './main/main.component';
import { ArticleComponent } from './article/article.component';    
import { Routes } from "@angular/router";

export const routes: Routes = [

    {
        path: '', component: MainComponent
    },
    {
        path: 'article', component: ArticleComponent
    }
];

这是里面articleList.component.html

<div class="post-preview" [routerLink]="['/article']">

这是app.routing.module

import { routes } from './app.routing';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果你们想在这里检查整个代码，repo and here is the deploy link。

Answer 1

您是否指定了base-href？我查看了回购协议，但没有在项目配置中找到它。尝试在您的配置中添加 baseHref。

只是 angular.json 的片段示例：

"outputPath": "wwwroot/dist",
"baseHref": "/dist/",
"deployUrl": "/dist/",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
    "ClientApp/resources"
],
"styles": [
    "ClientApp/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

您可以阅读此 issue 了解更多信息。

Answer 2

我发现发生了什么！

在我的 /docs/index.html 中有一个基本 href，它是在我运行

的那一刻给出的

ng build --prod --base-href <nameHere>

不是亲戚 url。我必须在这个 index.html 文件中将 // 添加到基本 href，这就是它的样子：

 <base href="/blogfolio/">

这让它起作用了。我知道一个好的答案是将 '/blogfolio/' 添加到 ng build href 但这似乎也不起作用。

有一个关于那个的 PR here。

谢谢你们所做的一切！

Answer 3

如果您的 Angular 应用程序中有路由器，那么它在 GitHub 页面中将不可用，您将获得 404 页面。

要解决这个问题，您需要告诉服务器当找不到页面时需要做什么，因此复制index.html 文件并将其重命名为404.html。这确保所有未找到的路由都将重新路由到 Angular 路由器，并且它将正确处理。

请参阅this了解更多信息。谢谢！

将 Angular 7 个部署到 github 个页面

Deploy Angular 7 to github pages

github-pages

angular-routing

angular

angular7