Ionic v3迁移至v5后ionic build报错及serve空白页问题求助

问题描述 #

我们已将项目从Ionic v3迁移至Ionic v5，目前ionic serve命令可运行，但启动后显示空白页；执行ionic build命令时抛出如下错误：

[11:57:17] ionic-app-script task: "build"
[11:57:17] TypeError: Cannot read property 'compilation' of undefined
TypeError: Cannot read property 'compilation' of undefined
at DefinePlugin.apply (/Users/upgrade/node_modules/webpack/lib/DefinePlugin.js:280:18)
at Compiler.apply (/Users/upgrade/node_modules/@ionic/app-scripts/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/upgrade/node_modules/@ionic/app-scripts/node_modules/webpack/lib/webpack.js:33:19)
at /Users/upgrade/node_modules/@ionic/app-scripts/dist/webpack.js:132:24
at new Promise ()
at runWebpackFullBuild (/Users/upgrade/node_modules/@ionic/app-scripts/dist/webpack.js:113:12)
at webpackWorker (/Users/upgrade/node_modules/@ionic/app-scripts/dist/webpack.js:70:19)
at Object.webpack (/Users/upgrade/node_modules/@ionic/app-scripts/dist/webpack.js:29:12)
at bundleWorker (/Users/upgrade/node_modules/@ionic/app-scripts/dist/bundle.js:13:22)
at Object.bundle (/Users/upgrade/node_modules/@ionic/app-scripts/dist/bundle.js:6:12)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

ionic-app-scripts build exited with exit code 1.

Re-running this command with the --verbose flag may provide more information.

项目需要适配浏览器、Android和iOS三大平台，需通过ionic build生成www文件夹及相关文件，求解决方法。

解决步骤 #

1. 修复webpack版本不兼容问题 #

这个报错核心是@ionic/app-scripts和当前webpack版本不匹配——Ionic v5已弃用ionic-app-scripts，改用Angular CLI的构建链：

• 卸载旧依赖：

  npm uninstall @ionic/app-scripts --save-dev
  

• 安装适配的构建依赖：

  npm install @angular-devkit/build-angular @angular/cli --save-dev
  

• 更新package.json中的scripts命令，替换旧build脚本：
  将原来的"build": "ionic-app-scripts build"修改为：

  "build": "ng build",
  "build:android": "ng build --configuration production && ionic capacitor copy android",
  "build:ios": "ng build --configuration production && ionic capacitor copy ios",
  "build:browser": "ng build --configuration production"
  

2. 解决serve空白页问题 #

空白页多由路由配置、模块导入错误或polyfill缺失导致：

• 检查app-routing.module.ts，确保根路由配置正确，示例：

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

• 检查polyfills.ts，补充Ionic v5必需的polyfill：

  import 'zone.js';
  import 'core-js/es/reflect';
  import 'core-js/es/array';
  

• 打开浏览器开发者工具（F12），查看Console和Network面板，定位资源加载失败或JS报错并修复。

3. 清理依赖缓存并重装 #

迁移易引发依赖冲突，执行以下操作：

• 删除依赖文件夹和锁文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 清理Ionic缓存：

  ionic cache clear
  

4. 配置Capacitor适配移动端 #

若适配Android和iOS，需确保Capacitor配置正确：

• 初始化Capacitor（未初始化时执行）：

  ionic init
  npm install @capacitor/core @capacitor/cli
  npx cap init
  

• 添加平台：

  npx cap add android
  npx cap add ios
  

• 构建后同步到平台：

  ng build --prod
  npx cap sync
  

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