使用离子电容器将 ReactJS-Project 转换为 Android-App 在 WSL 上抛出错误

Question

我目前正在开发一个相对简单的 Web 应用程序，我决定使用 ReactJS 作为框架。
我用 create-react-app 创建了一个简单的演示项目来开始。
我正在使用 Linux 子系统开发 Windows 10 系统。

现在我的任务是让网站成为一个 Android 和后来的 iOs 应用程序。

网页应该仍然可以通过浏览器访问，所以我想我坚持使用 React 并构建响应式网页，以便在每个设备上提供相同的功能。

我研究了将 React 项目转换为“本机”/混合应用程序的方法，并偶然发现了 Cordova 和 Ionic。

我尝试按照本文中的步骤操作 Convert your existing react js app to android or ios app using the ionic capacitor
我通过使用用于 GUI 应用程序的 XServer 在 WSL 上安装了 Android Studio。

现在，当我尝试通过使用将 Android 添加到我的项目时 ionic capacitor add android --verbose 我收到以下错误：

 ionic:lib Terminal info: { ci: false, shell: '/bin/bash', 

tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'capacitor', 'add', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +5ms
  ionic:lib:project Project type from config: @ionic/react (react) +0ms
  ionic:lib:project Project details: { context: 'app', type: 'react', errors: [], configPath: '/mnt/d/ews/ReactWS/pacFrontend/ionic.config.json' } +1ms
  ionic Context: { binPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli', execPath: '/mnt/d/ews/ReactWS/pacFrontend', version: '6.12.1' } +0ms
> capacitor add android
  ionic:lib:telemetry Sending telemetry for command: 'ionic capacitor add' [ 'android', '--verbose', '--interactive', '--color' ] +0ms
Error

at new SubprocessError
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
at ChildProcess.<anonymous>
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
  ionic Error
  ionic     at new SubprocessError (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
  ionic     at ChildProcess.<anonymous> (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
  ionic     at ChildProcess.emit (events.js:315:20)
  ionic     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
  ionic     at onErrorNT (internal/child_process.js:465:16)
  ionic     at processTicksAndRejections (internal/process/task_queues.js:80:21) +126ms

现在我无法通过 Google 找到解决方案 - 这是 Problem/Bug 与 ionic/Capacitor 还是 WSL。

感谢每一个帮助

Answer 1

所以我设法解决了我的问题，或者至少让我的 React Webapp 作为一个 Android-App 工作。

我卸载了 ionic、capacitor 和其他所有东西，并删除了我的 node_modules 来制作一个新的 npm install
我继续

npm install @capacitor/core @capacitor/cli

并用

启动电容器

npx cap init 
npx cap add android

现在我使用

构建网页

npm run build

创建我使用的 Android 应用程序

npx cap copy
npx cap copy android

然后我可以在 Android Studio 中打开生成的 android 文件夹并使用模拟器测试应用程序

使用离子电容器将 ReactJS-Project 转换为 Android-App 在 WSL 上抛出错误

Convert ReactJS-Project to Android-App with ionic capacitor throws Error on WSL

android

reactjs

ionic-framework

windows-subsystem-for-linux