Angular部署GitHub Pages时assets资源路径异常问题求助

• 核对base-href的准确性
  你用的ng build --output-path docs --base-href /smo-study/命令没问题，但得保证你的GitHub Pages访问路径确实是https://<你的用户名>.github.io/smo-study/，base-href的值必须和仓库名完全一致——GitHub区分大小写，别写错。

• 调整模板里资源的引用方式
  别用../../assets/xxx这类相对路径，换两种靠谱写法：

  • 直接写绝对路径：/smo-study/assets/images/filename.jpg，和你设置的base-href对应上
  • 用Angular动态绑定：先在组件里注入DOCUMENT获取base地址，再拼接资源路径

    import { Component, Inject } from '@angular/core';
    import { DOCUMENT } from '@angular/common';
    
    @Component({...})
    export class YourComponent {
      baseUrl: string;
      constructor(@Inject(DOCUMENT) private document: Document) {
        this.baseUrl = this.document.baseURI;
      }
    }
    

    模板里这么用：[src]="baseUrl + 'assets/images/filename.jpg'"

• 检查angular.json的assets配置
  确保angular.json里projects -> <你的项目名> -> architect -> build -> options -> assets是如下配置：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  别把assets移到app目录，就放在src下面，Angular默认会正确打包到docs文件夹里。

• 如果用了路由，添加哈希配置
  GitHub Pages不支持SPA的路由重写，所以在app-routing.module.ts里给路由加useHash: true：

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

  这能避免不少路径解析的坑。

• 重新构建并提交
  改完配置后，重新执行ng build --output-path docs --base-href /smo-study/，然后把docs文件夹里的所有内容提交到gh-pages分支，别留旧文件缓存。

内容的提问来源于stack exchange，提问作者JRT