将 Angular 7 部署到 github 页面 [英] Deploy Angular 7 to github pages

问题描述

我有一个简单的 angular7 应用程序，它只有两条路线，主要是文章".如果您在本地测试它，它会起作用，但是当您放置 github 页面时，它只会加载页面的 css.我按照 documentation 上的 angular 文档进行部署，我还尝试使用 gh-pages 工具.但他们都没有工作.如果我删除我的路线它会工作.

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

1 ERROR 错误:未捕获(承诺):错误:无法匹配任何路由.URL 段:博客"错误:无法匹配任何路由.URL 段:博客"在 t.noMatchError (main.5443131190bc79920d7b.js:1)在 e.selector (main.5443131190bc79920d7b.js:1)………………rodnorm.github.io/:1 加载资源失败:服务器响应状态为 404 ()

这是我的代码:

app.routing.ts

import { MainComponent } from './main/main.component';从'./article/article.component'导入{文章组件}；从@angular/router"导入{路由}；导出常量路由:路由 = [{路径:''，组件:MainComponent},{路径:'文章'，组件:文章组件}];

这是在 articleList.component.html 中

这是 app.routing.module

import { routes } from './app.routing';从'@angular/core' 导入 { NgModule };从 '@angular/router' 导入 { RouterModule };@NgModule({进口:[RouterModule.forRoot(routes)]，出口:[路由器模块]})导出类 AppRoutingModule { }

如果你们想在这里查看整个代码，请查看 repo，这里是部署 链接.

解决方案

我发现了正在发生的事情！

在我的/docs/index.html 中，我运行时给出了一个基本的 href

ng build --prod --base-href 

不是相对网址.我不得不在这个 index.html 文件中添加//到 base href ，这是它的样子:

这使它起作用.我知道一个好的答案是将/blogfolio/"添加到 ng build href 中，但这似乎不起作用.

这里有一个公关.

谢谢你所做的一切，伙计们！

I have a simple angular7 app that has only two routes the main the 'article'. It works if you test it locally but when you put on github pages it just loads the page's css. I deployed following the angular documentation at the documentation and I also tried with the gh-pages tool. But none of them worked. If I remove my routes it would work.

This is the error I'm getting on the console.

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

This is my code:

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
    }
];

This is inside articleList.component.html

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

This is the 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 { }

If you guys want to check the whole code here it the repo and here is the deploy link.

解决方案

I found what was happening!

Inside my /docs/index.html there was a base href that was given on the moment I ran the

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

was not a relative url. I had to add // in this index.html file to the base href this is how it looks like:

 <base href="/blogfolio/">

This made it work. I know a good answer would be adding the '/blogfolio/' to the ng build href but that doesn't seem to work as well.

There's a PR about that here.

Thanks for everything, guys!

这篇关于将 Angular 7 部署到 github 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！