Ionic5新建页面访问跳转404 无法找到对应路径URL问题咨询

• 路由未注册
  Ionic默认基于Angular路由体系，仅把页面文件放到src/app目录不会自动注册路由。需要检查src/app/app-routing.module.ts文件中是否新增了对应页面的路由规则：
  如果是组件直接加载的写法，需要先导入页面组件，再配置路由：

// 导入新建页面组件
import { CustomPage } from './custom/custom.page';

const routes: Routes = [
  // 原有路由配置
  {
    path: 'custom',
    component: CustomPage
  }
];

如果是延迟加载模块的写法，需要确认loadChildren的导入路径和页面模块的实际存储路径完全匹配，无拼写错误。

• 页面组件/模块声明缺失
  如果是手动创建的页面，没有使用ionic generate page命令自动生成代码，需要确认两个配置：
  1. 页面自身的模块文件（如custom.module.ts）中，已经在declarations数组中声明了页面对应的组件
  2. 如果是未做模块拆分的项目，需要确认app.module.ts的declarations数组中已经加入了新页面的组件
• 路由路径拼写错误
  Angular路由路径大小写敏感，访问的URL需要和路由配置的path字段完全匹配，注意不要出现多写/少写斜杠、拼写错误、下划线和中横线混用的情况。比如路由配置的path为user-list，访问user_list就会触发404。
• 通配符路由顺序错误
  检查路由配置中匹配404的通配符路由{path: '**', redirectTo: 'page-not-found'}的位置，该规则必须放在所有路由配置的最后。如果新页面的路由写在了通配符路由的后面，会优先匹配到404规则，导致新页面无法被正常访问。
• 自动生成页面的层级问题
  如果是通过ionic generate page命令生成的页面，生成时如果加了路径前缀，路由会自动生成对应层级。比如执行ionic generate page pages/goods，自动生成的路由path为pages/goods，直接访问/goods就会404，需要按实际生成的路由层级访问。

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