Ionic7+Angular15创建应用时路由与页面模块未生成求助

问题描述 #

• 使用Ionic 7 + Angular 15执行命令 ionic start test blank -type=angular 创建空白应用后，未生成 src/app/app-routing.module.ts 文件
• 执行 ionic g page page/myPage 生成页面时，未生成对应的页面模块文件

已安装全局依赖 #

• @angular/cli@15.2.4
• @briebug/jest-schematic@5.0.0
• @ionic/cli@7.0.0
• @nestjs/cli@9.1.3
• cordova-res@0.15.4
• jest@29.3.1
• native-run@1.7.2

项目package.json内容 #

{
  "name": "pokedexApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.7.1",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.1",
    "@capacitor/status-bar": "4.1.1",
    "@ionic/angular": "^7.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/cli": "4.7.1",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

解决方案 #

1. 修复Ionic Angular Toolkit版本兼容性

当前@ionic/angular-toolkit@9.0.0与Ionic7、Angular15存在兼容性问题，降级到适配版本：

npm uninstall @ionic/angular-toolkit
npm install @ionic/angular-toolkit@8.2.0 --save-dev

2. 手动创建应用路由模块

如果降级后仍未自动生成路由文件，手动创建src/app/app-routing.module.ts：

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
];

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

然后在src/app/app.module.ts中导入并添加到imports数组：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule, // 添加这一行
    AppComponent
  ],
  ...
})
export class AppModule { }

3. 生成带模块的页面

使用指定参数的命令生成页面，确保自动生成对应模块并关联路由：

ionic g page page/myPage --route /my-page --module app-routing.module.ts

或直接使用Angular CLI命令：

ng generate page page/myPage --module app-routing.module.ts

4. 清理缓存并重新初始化

如果上述操作无效，清理依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

之后再重新执行页面生成命令。

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