如何为Ionic-Angular独立页面定义嵌套式路由并解决刷新报错

这个问题的核心是Angular默认的PathLocationStrategy会让浏览器在刷新时直接请求服务器上的对应路径，但你的服务器没有配置将所有路由请求重定向到index.html，导致返回404错误，同时因为服务器返回的不是HTML文件，触发MIME类型错误。

解决步骤 #

1. 配置服务器重写规则（生产部署必备）

无论你用Nginx、Apache还是其他静态服务器，都需要添加规则，让所有路由请求最终返回应用的index.html，由Angular路由系统处理路径。

• Nginx配置示例：
  在你的服务器配置文件中，添加如下规则：

  server {
      listen 80;
      server_name 你的域名;
      root /应用打包后的dist目录路径;
      index index.html;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

• Apache配置示例：
  在应用根目录创建.htaccess文件，添加：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  # 如果请求的文件或目录不存在，重定向到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

2. 检查base href配置

确保src/index.html中的<base>标签路径正确：

<base href="/">

如果你的应用部署在服务器的子目录下（比如https://example.com/my-app/），需要改为对应路径：

<base href="/my-app/">

3. 备选方案：改用HashLocationStrategy（无需服务器配置）

如果无法修改服务器配置，可以切换到哈希模式路由，URL会变为/#/monitor/story，刷新时浏览器不会请求服务器的具体路径，而是直接加载index.html。

修改AppRoutingModule：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';

export const routes: Routes = [
  { path: "monitor", loadChildren: () => import('./pages/storyline/story-list/story-list.module').then(m => m.StoryListPageModule) },
  { path: "monitor/story", pathMatch: 'full', loadChildren: () => import('./pages/storyline/story-home/story-home.module').then(m => m.StoryHomePageModule) }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }], // 添加这行
  exports: [RouterModule]
})
export class AppRoutingModule { }

验证 #

完成配置后，重新打包部署应用，刷新/monitor/story路径，页面应该能正常加载。

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