将 Angular 7 部署到 github 页面

2024-02-27

我有一个简单的 Angular7 应用程序,它只有两条路线,主要是“文章”。如果你在本地测试它,它会起作用,但是当你放到 github 页面上时,它只会加载页面的 css。我按照以下角度文档进行部署文档 https://angular.io/guide/deployment我还尝试使用 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 () 

这是我的代码:

应用程序.routing.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 https://github.com/Rodnorm/blogfolio这是部署link https://rodnorm.github.io/blogfolio/.


如果你的 Angular 应用程序中有路由器,那么它将在 GitHub 页面中不可用,并且你会得到一个 404 页面。

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

请参考this https://angular.io/guide/visual-studio-2015#for-apps-that-use-routing了解更多信息。谢谢!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Angular 7 部署到 github 页面 的相关文章

  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • Angular - 为每个请求设置标头

    我需要在用户登录后为每个后续请求设置一些授权标头 要为特定请求设置标头 import Headers from angular2 http var headers new Headers headers append headerName
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • 资产未考虑基本 href url - 未找到错误

    我刚刚在 Webform 项目中复制了 Angular 构建脚本 并将该项目部署到 IIS 中 注意 我只复制了脚本文件 没有单独部署在 IIS 中 我已将 Angular dist 文件夹复制到 Webform 项目的 Scripts 文
  • Angular 2 重复标头

    使用时出现重复标头问题
  • 使用服务中的可观察量测试错误情况

    假设我有一个订阅服务功能的组件 export class Component ngOnInit this service doStuff subscribe data IData gt doThings data error Error g
  • 观众:覆盖单个测试的提供者(角度通用)

    我构建了一个小型角度应用程序 现在正在编写单元测试 到目前为止一切顺利 但是当我尝试测试我的 authGuard 时 我遇到了一些问题 我在用观众 https github com ngneat spectator 我在规范的提供者部分中提
  • Angular 4 显示其中的数据

    我不喜欢从 API 返回到我的 Angular 4 应用程序的数据 这是 JSON 的示例 我不关心美元 但这是我正在处理的数据类型 最终目标是在页面上展示 Coin Price BTC 4 281 28 ETH 294 62 etc JS
  • 如何禁用 ng2-dragula 上的某些元素的拖动

    我想在顶部显示名称组并取消其上的拖动事件 如何禁用移动某些元素 例如该组名称位于顶部 我的代码是 dragulaService drag subscribe value gt console log drag value 0 我的模板 di
  • Angular 中多个相同的异步管道导致多个 http 请求

    在我的角度应用程序中 我使用异步管道多次渲染组件
  • 如何在ionic 2中创建覆盖页面?

    当我进入新页面时如何创建透明的引导覆盖页面 我如何在 ionic 2 中实现 您可以在外部创建 div
  • AngularJS - 获取已定义路由的列表 - $routeProvider

    我正在尝试实施named routes 所以我不必写整个路径 经常改变 我想我可以编写一个服务来返回定义的路由列表和一个将对象转换为路由的过滤器 使用示例如下所示 a Click here a 假设我已将 name detail 添加到我的
  • Angular Libraries Monorepo:是否可以为每个库使用不同的版本?

    只是一个简单的问题 我似乎找不到答案 我正在尝试构建一个应该能够使用 angular cli v8 的 monorepo 但仍然能够编译和构建为 v2 v3 v4 等制作的库 主要是组件和服务 版本之间发生了很多变化 所以让我们举个例子 V
  • 设置 Angular 2 http 请求的基本 url

    我正在尝试为所有 Angular 2 http 请求设置基本 url 以下是我的应用程序的基本设置 class HttpOptions extends BaseRequestOptions url string http 10 7 18 2
  • 如何使用深度等于 (Angular 7)

    通过 VS Code 自动导入 import deepEqual require deep equal 不起作用 错误 TS1202 定位时无法使用导入分配 ECMAScript 模块 考虑使用 import as ns from mod
  • Angular - 如何解析 event.path 内的对象

    现在这是一个很难解释的复杂问题 我会尽力解释 我有一个弹出窗口 我想从中唯一地标识单击事件是来自弹出窗口内部还是外部 我的第一个方法 我用一个包住了整个弹出框div与id 说 独特 因此 我将单击事件与主机侦听器绑定 我将为其获取事件对象
  • 可从 Angular2 中的

    使用 Angular 2 从按钮的 onclick 事件创建可观察对象的首选方法是什么 我不确定从组件代码中的 DOM 获取本机元素是否被认为是最佳实践 我该怎么做 或者是否还有其他我不知道的快捷方式 别想太多 ViewChild butt
  • 在业力测试中按类名获取两个div(Angular 4.0)

    我有这样的看法 div div class header title Example title 1 div div div div class header title Example title 2 div div 在我的业力测试中 我

随机推荐

  • 如何将C++变量数据放入system()函数中

    如何将 C 变量数据放入 system 函数中 看下面的代码 include
  • 将地图/字典的 Spark Dataframe 列扁平化为多列

    我们有一个DataFrame看起来像这样 DataFrame event string properties map
  • 在vim中显示尾随空格

    我在 vimrc 中设置了以下选项 set listchars tab trail set list 并期望在代码中使用空格进行制表的那些地方看到点 我使用空格 而不是制表符 然而 结果却不同 您能否建议如何达到预期的结果 谢谢 你应该检查
  • 从列表中选择随机值,直到它们在Python中消失

    使用 Python 我想从列表中随机选择人员 并将他们分成 5 人一组 而不是多次选择同一个人 人们由两个标准定义 年龄和性别 人员名单如下所示 PPL 1 4 6 2 5 5 3 7 3 4 2 8 5 4 6 其中每个列表中的 3 个数
  • Google Shopping REST API 按类别限制

    我正在尝试按类别限制 Google 购物请求 在这种情况下 我只希望返回实际的电影 DVD 蓝光 这是我要传递的内容 其中 MY KEY 是我从以下位置获得的密钥 https code google com apis console pro
  • 如何更改用于指示已在 TabHost 上选择选项卡的颜色?

    在安卓上TabHost layout 当用户选择一个选项卡时 选项卡的颜色会暂时改变 如何禁用此颜色更改 或指定选项卡更改为的颜色 UPDATED 我没有制作自己的示例并因此而获得荣誉 而是找到了我的旧书签教程 如何更改 Android 选
  • liquibase.properties 中的 Liquibase 变更日志参数

    根据文档 参数值按以下顺序查找 作为参数传递给 Liquibase 运行程序 有关如何传递它们的信息 请参阅 Ant command line 等文档 作为 JVM 系统属性 在 DatabaseChangeLog 文件本身的参数块 Tag
  • 上传时转换视频[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想在用户上传视频时将其转换 例如从 wmv 格式转换为 flv 我可以转换视频或单独上传 但如何立即执行这些操作 我使用 ffmpeg 进行转换 例
  • 如何创建一个简单的谷歌地图地址搜索并在flutter中自动完成并获取纬度和经度?

    我是 Flutter 的新手 我正在尝试构建一个简单的谷歌地图应用程序 我已经在应用程序中实现了谷歌地图 并且运行完美 但现在我想添加谷歌地图自动完成功能 但我找不到专注于它的简单教程或示例 我有一个文本字段 我想根据用户输入的内容显示其下
  • Facebook 以页面管理员身份发布页面提要

    var message test var picture http l yimg com f i tw ks show 120604 mntl01 jpg var link https www youtube com watch v BIl
  • ReactJS:当输入元素进入 DOM 时如何将焦点设置到输入元素?

    如何将焦点设置到input元素进入 DOM 时 Scenario 单击按钮时 将显示输入元素 如何将焦点设置到该元素 代码片段 class Component extends React Component constructor prop
  • 错误处理仅有效一次

    我有一个非常简单的 VBA 代码 应该尝试打开一个不存在的文件 将我发送到错误处理程序 然后以无限循环返回到我的代码 故意 但是 编译器仅在第一次捕获错误 然后在第二次传递时中断 我已经尝试了 On Error 语句的每种组合以在第二次传递
  • 如何增加 QListWidget 中项目/行的填充(或边距)?

    我们正在寻找一种方法来增加填充 或边距 QListWidget我们正在我们的应用程序中使用 我们希望为所有四个方向增加此值 以便为列表中的文本提供一些额外的空间 我查看了两者的文档QListWidget http doc qt io qt
  • 关闭按钮仅适用于 Qt 中的某些选项卡

    我正在使用 Qt 完成大学作业 并且我想使用QTabWidget显示一个聊天窗口 就像Pidgin s https www pidgin im 我想让 群聊 选项卡始终打开且无法关闭 而其余 私人频道 选项卡可关闭 QTabWidget s
  • 所有页面/视图都需要 Blazor /Pages 文件夹吗?

    使用默认的 Blazor helloworl 应用程序 我将 FetchData razor 页面复制到单独的自定义文件夹中 结果 页面未正确呈现 页面正在占用 整个屏幕 导航菜单消失了 问题 blazor 页面 视图必须位于 Pages
  • 如何在不使用任何算术运算的情况下求 x mod 15?

    假设我们得到一个无符号整数 并且不使用任何算术运算符 即 or 我们要找到x mod 15 我们可以使用二进制位操作 据我所知 我是根据两点得出这个结论的 a a mod 15 a mod 16 for a lt 15 Let a x mo
  • 从 Firefox 的缓存中读取脚本标签的来源

    我正在向我的应用程序添加一些错误报告 我希望能够报告类中的方法名称 即使该函数可能是匿名的 到目前为止 我的解决方案涉及通过使用 XmlHttpRequest 加载脚本标签来读取脚本标签的源代码 我的问题是 Firefox 不会从缓存加载
  • 如何管理露天的访问权限

    大家好 提前感谢您的帮助 我正在尝试在露天配置访问权限 但现在陷入了一个场景如果有人定义实现此功能的正确方法 那将会有很大帮助现在我的问题是 我想创建一个网站 所有用户都可以访问 然后将在该站点中创建文件夹和子文件夹 如果需要 我准备自定义
  • K 最近邻算法 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 使用 KNN 算法 假设 k 5 现在我尝试通过获取 5 个最近的邻居来对未知对象进行分类 如果确定 4 个最近邻居后 接下来的 2 个
  • 将 Angular 7 部署到 github 页面

    我有一个简单的 Angular7 应用程序 它只有两条路线 主要是 文章 如果你在本地测试它 它会起作用 但是当你放到 github 页面上时 它只会加载页面的 css 我按照以下角度文档进行部署文档 https angular io gu