升级Angular与NativeScript版本后iOS应用启动崩溃求助

运行环境 #

• MacOS Ventura 13.5
• Xcode 14

原可正常运行的package.json配置 #

{
  "name": "mytestapp",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.1.0",
    "@angular/common": "~15.1.0",
    "@angular/compiler": "~15.1.0",
    "@angular/core": "~15.1.0",
    "@angular/forms": "~15.1.0",
    "@angular/platform-browser": "~15.1.0",
    "@angular/platform-browser-dynamic": "~15.1.0",
    "@angular/router": "~15.1.0",
    "@nativescript/angular": "^15.0.0",
    "@nativescript/core": "~8.4.0",
    "@nativescript/theme": "~3.0.2",
    "rxjs": "~7.6.0",
    "zone.js": "~0.12.0"
  },

  "devDependencies": {
    "@angular-devkit/build-angular": "~15.1.0",
    "@angular/compiler-cli": "~15.1.0",
    "@nativescript/types": "~8.4.0",
    "@nativescript/webpack": "~5.0.12",
    "@ngtools/webpack": "~15.1.0",
    "typescript": "~4.8.4"
  }
}

升级后的package.json配置 #

{
  "name": "mytestapp",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~16.2.0",
    "@angular/common": "~16.2.0",
    "@angular/compiler": "~16.2.0",
    "@angular/core": "~16.2.0",
    "@angular/forms": "~16.2.0",
    "@angular/platform-browser": "~16.2.0",
    "@angular/platform-browser-dynamic": "~16.2.0",
    "@angular/router": "~16.2.0",
    "@nativescript/angular": "^16.0.0",
    "@nativescript/core": "~8.5.9",
    "@nativescript/theme": "~3.0.2",
    "rxjs": "~7.6.0",
    "zone.js": "~0.13.1"
  },

  "devDependencies": {
    "@angular-devkit/build-angular": "~16.2.0",
    "@angular/compiler-cli": "~16.2.0",
    "@nativescript/ios": "8.5.2",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.17",
    "@ngtools/webpack": "~16.2.0",
    "typescript": "~5.1.6"
  }
}

问题现象 #

执行npm install和tns run ios后，编译正常，但应用启动后立即崩溃，报错信息如下：

Restarting application on device 3602221B-FFEF-4B2A-88D3-FA8CF56F2930...

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught SyntaxError: Unexpected token '{'
at
require(:1:137)
at __webpack_require__.f.require(file: src/webpack:/mytestapp/webpack/runtime/require chunk loading:29:0)
at (file: src/webpack:/mytestapp/webpack/runtime/ensure chunk:6:0)
at __webpack_require__.e(file: src/webpack:/mytestapp/webpack/runtime/ensure chunk:5:0)
at __webpack_require__.X(file: src/webpack:/mytestapp/webpack/runtime/startup entrypoint:5:0)
at (file:///app/bundle.js:393:47)
at (file:///app/bundle.js:398:3)
at require(:1:137)

排查解决步骤 #

• 清理缓存与构建产物
  执行以下命令彻底清理后重新安装：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  tns platform remove ios
  tns build ios --clean
  npm install
  

• 检查TypeScript配置
  确保tsconfig.json配置适配Angular 16和NativeScript 16：

  • 设置target为ES2022或更低（避免iOS JS引擎不支持的语法）
  • 将module设为ESNext或CommonJS
  • 添加"skipLibCheck": true跳过库类型检查，避免版本冲突

• 更新Webpack配置
  生成适配当前版本的Webpack配置：

  npx @nativescript/webpack init --force
  

• 校验iOS运行时兼容性
  打开platforms/ios目录下的Xcode项目：

  • 将部署目标设置为iOS 14.0或更高
  • 执行Cmd+Shift+K清理Xcode缓存后重新构建

• 排查第三方依赖冲突
  暂时移除非核心插件，逐一排查是否有插件与新版本NS/Angular不兼容，确认插件支持Angular 16和NS 8.5+版本。

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