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

问题描述

我有一个简单的angular7应用，其中只有两条路线是"article"主体.如果您在本地对其进行测试，则它会起作用，但是当您放置在github页面上时，它只会加载页面的CSS.我在文档中部署了有角度的文档，并且还尝试了gh-pages工具.但是他们都没有工作.如果我删除路线，它将可以正常工作.

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

  1错误错误:未捕获(承诺):错误:无法匹配任何路由.网址段:"blogfolio"错误:无法匹配任何路线.网址段:"blogfolio"在t.noMatchError(main.5443131190bc79920d7b.js:1)在e.selector(main.5443131190bc79920d7b.js:1)............rodnorm.github.io/:1无法加载资源:服务器的状态为404() 

这是我的代码:

app.rounting.ts

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

这是在articleList.component.html

中

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

这是app.routing.module

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

如果您想在此处检查整个代码，请 repo ，这里是部署链接.

解决方案

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

在我的/docs/index.html内部，当我运行

时给出了基本的href

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

不是相对网址.我必须在此index.html文件中将//添加到基本href中，这是这样的:

 < base href ="/blogfolio/"> 

这使它起作用.我知道一个很好的答案是将"/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屋！