时间戳

首页 > 解决方案 > 将 Angular 7 部署到 github 页面

angular - 将 Angular 7 部署到 github 页面

问题描述

我有一个简单的 angular7 应用程序，它只有两条主要的“文章”路线。如果您在本地测试它就可以工作，但是当您放在 github 页面上时，它只会加载页面的 css。我按照文档中的角度文档进行了部署，并且还尝试了使用 gh-pages 工具。但他们都没有工作。如果我删除我的路线，它会起作用。

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

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 ()

这是我的代码：

应用程序.rounding.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，这里是部署链接。

标签： angulargithub-pagesangular-routingangular7

解决方案

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

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

请参阅此以获取更多信息。谢谢！

推荐阅读