Angular 应用程序在本地工作，但在 github 页面上返回 404

编程问答 2022-06-01

问题描述

我有以下组件代码，即在主页顶部显示模式（就像 instagram）主页在 url.com 上显示整个画廊，同时为单个帖子指定 url (url.com/photo/ 1) 部署在 github 页面上时返回 404，但在本地服务器上运行良好。

这是我分配给 /post/:postId url 的组件的代码：

PostEntryComponent.ts

MarkupExtension

PostService.ts

  constructor(public dialog: MatDialog,public router: Router,public route: ActivatedRoute,private postService: PostService) {

    this.route.paramMap.pipe(
      take(1),switchMap(paramMap => {
        const id = paramMap.get('postId');
        return this.postService.getPostData(+id);
      })
    ).subscribe(data => {
      const dialogRef = this.dialog.open(PostModalComponent,{
          autoFocus: false,backdropClass: 'backdrop-background',data: {
            image: data.image,text: data.text
          }
        });
      dialogRef.afterClosed().subscribe(() => {
        this.router.navigate(['../../'],{relativeto: this.route});
      });
    });
  }
}

路由模块：

  getPostData(postId: number): Observable<Post> {
    return this.profileInfo.asObservable().pipe(
      switchMap((data: ProfileData) => {
        if (!data || data.posts.length <= 0) {
          return this.fetchProfileData();
        } else {
          return of(data);
        }
      }),skipwhile(data => data.posts.length < 1),take(1),map((data: ProfileData) => {
          if (data.posts) {
            return data.posts.find(p => p.id === postId);
          }
        }
      ));
  }

我的 app.component.html 仅包含：

RouterModule.forRoot([ { path: '',component: ShellComponent,children: [ { path: 'post/:postId',component: PostEntryComponent } ] },{ path: '**',redirectTo: 'home' } ])

并且我的 shell.component.ts 在末尾还包含 <router-outlet></router-outlet>，因此当有人单击照片模式弹出窗口时。基于此解决方案

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular2-routingjavascriptrxjs