Angular 12 在网页版上刷新页面后显示空白页面

Question

在我的 Angular 12 Capacitor 3 项目中，我正在使用路线。除了用于 root 的 app-routing.module.ts 之外，我还有用于子进程的 tab-guest-routing.module.ts 。

问题是当我刷新 http://localhost:8100/appguest/tabguest/guest 上的页面时 页面返回空白。这只发生在这个页面。

tab-guest-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from "./guards/auth.guard";


const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full'},
//  { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomePageModule), canActivate: [AuthGuard] },
  { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomePageModule) 
  }, 
  {path: 'app', loadChildren: () => import('./pages/tablinks/tablinks.module').then(m => m.TablinksPageModule)
  },
  {path: 'appguest', loadChildren: () => import('./pages/tab-guest/tab-guest.module').then(m => m.TabGuestPageModule)
  },
  { path: 'login', loadChildren: () => import('./pages/auth/login/login.module').then(m => m.LoginPageModule) 
  },
  { path: 'signup', loadChildren: () => import('./pages/auth/register/register.module').then(m => m.RegisterPageModule) },
  { path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
  { path: 'terms', loadChildren: () => import('./pages/terms/terms.module').then(m => m.TermsPageModule) },
  { path: 'eula', loadChildren: () => import('./pages/eula/eula.module').then(m => m.EULAPageModule)},
  { path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
  { path: 'privacy', loadChildren: () => import('./pages/privacy/privacy.module').then(m => m.PrivacyPageModule)},
  { path: 'forgot-password', loadChildren: () => import('./pages/auth/forgot-password/forgot-password.module').then(m => m.ForgotPasswordPageModule) },
  {
    path: 'notifications-setings',
    loadChildren: () => import('./pages/notifications-setings/notifications-setings.module').then( m => m.NotificationsSetingsPageModule)
  },
  {
    path: 'media-ad-details',
    loadChildren: () => import('./pages/mediaPromote/media-ad-details/media-ad-details.module').then( m => m.MediaAdDetailsPageModule)
  },
 
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

tab-guest-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from "../../guards/auth.guard";

import { TabGuestPage } from './tab-guest.page';
// see we converted guest as tab ok YES so we need one page to represent as guest YES 
const routes: Routes = [
  {
    path: 'tabguest',
    component: TabGuestPage,
    children: [
      {
        path: 'guest',
        children: [
          {
            path: '',
            loadChildren: () => import('../guest/guest.module').then(m => m.GuestPageModule)
          },
          { path: 'all-flows', loadChildren: () => import('../all-flows/all-flows.module').then(m => m.AllFlowsPageModule) },
          { path: 'all-media', loadChildren: () => import('../all-media/all-media.module').then(m => m.AllMediaPageModule) },
          { path: 'flow-profile', loadChildren: () => import('../flow-profile/flow-profile.module').then(m => m.FLOWPROFILEPageModule) },
          { path: 'media', loadChildren: () => import('../media/media.module').then(m => m.MediaPageModule) },
          { path: 'user', loadChildren: () => import('../user/user.module').then(m => m.UserPageModule) },
          { path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersPageModule) },
          { path: 'top-media', loadChildren: () => import('../top-media/top-media.module').then(m => m.TopMediaPageModule) },
          { path: 'all-media-ads', loadChildren: () => import('../all-media-ads/all-media-ads.module').then(m => m.AllMediaAdsPageModule) },
          { path: 'top-reviews', loadChildren: () => import('../top-reviews/top-reviews.module').then(m => m.TopReviewsPageModule) },
        ]
      },
      {
        path: 'users',

        children: [
          {
            path: '',
            loadChildren: () => import('../users/users.module').then(m => m.UsersPageModule),
          },
          {
            path: 'user',
            loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
          },
        ]
      },
      { 
        path: 'welcome', loadChildren: () => import('../../pages/welcome/welcome.module').then(m => m.WelcomePageModule)

      },
      
      {
        path: 'search',
        children: [
          {
            path: '',
            loadChildren: () => import('../search/search.module').then(m => m.SearchPageModule),
          },
          {
            path: 'user',
            loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
          },
          {
            path: 'media',
            loadChildren: () => import('../media/media.module').then(m => m.MediaPageModule)
          },
          {//I always checked with yor cred and guest login yes i know we should see how a new user will feel got it
            path: 'flow-profile',
            loadChildren: () => import('../flow-profile/flow-profile.module').then(m => m.FLOWPROFILEPageModule)
          },
        ]
      },
      {
        path: '',
        redirectTo: '/tabguest/guest',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabguest/guest',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabGuestPageRoutingModule { }

控制台出现错误。

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
:8100/appguest/tabguest/runtime.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/polyfills.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/vendor.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)
:8100/appguest/tabguest/main.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)
capacitor.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)
styles.js:1          Failed to load resource: the server responded with a status of 404 (Not Found)

这些错误仅出现在本页面上，不会显示给其他任何人。这就是为什么我认为这是一个路由问题 我做错了什么？有人可以帮助我吗？

Answer 1

确保您的index.html 看起来像：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> sitename </title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

Answer 2

如果有一个 baseHref 设置 angular.json，这可能会给您带来麻烦，例如如果 baseHref="" 尝试删除它或将其更改为 baseHref="/"