【问题标题】：Android white screen when running ionic capacitor run with SSL使用 SSL 运行离子电容器时 Android 白屏
【发布时间】：2022-08-04 01:40:37
【问题描述】：

我正在尝试运行一个简单的测试，尝试将离子和电容器添加到已经存在的角度项目中。我已经设法让它工作并正常运行，但是当我将 SSL 命令添加到 CLI 以便服务器使用 HTTPS 运行时，应用程序不再加载，我只能看到一个空白屏幕。此外，如果我从浏览器手动访问 URL，一切都会正确加载。会不会是在 Android Studio 或离子/电容器文件中配置错误？我尝试了不同的配置和不同的模拟设备 w/不同的 Android 版本，但没有用，我无法让它工作。如果有人可以帮助我，我当然会感激...

运行ionic capacitor run android --livereload --external

https://i.stack.imgur.com/8LxNV.png

当我将 --ssl 标志添加到 CLI ionic capacitor run android --livereload --external --ssl

https://i.stack.imgur.com/fS0jV.png

https://i.stack.imgur.com/D3sLL.png

https://i.stack.imgur.com/3v5Bx.png

电容器.config

import { CapacitorConfig } from \'@capacitor/cli\';

const config: CapacitorConfig = {
  appId: \'io.ionic.starter\',
  appName: \'iotest\',
  webDir: \'./android/www\',
  bundledWebRuntime: false
};

export default config;

Angular.json

{
  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",
  \"version\": 1,
  \"newProjectRoot\": \"projects\",
  \"cli\": {
    \"defaultCollection\": \"@ionic/angular-toolkit\"
  }, 
  \"schematics\": {
    \"@ionic/angular-toolkit:component\": {
      \"styleext\": \"scss\"
    },
    \"@ionic/angular-toolkit:page\": {
      \"styleext\": \"scss\"
    }
  },
  \"projects\": {
    \"iotest\": {
      \"projectType\": \"application\",
      \"schematics\": {
        \"@schematics/angular:component\": {
          \"style\": \"scss\"
        },
        \"@schematics/angular:application\": {
          \"strict\": true
        }
      },
      \"root\": \"\",
      \"sourceRoot\": \"src\",
      \"prefix\": \"app\",
      \"architect\": {
        \"build\": {
          \"builder\": \"@angular-devkit/build-angular:browser\",
          \"options\": {
            \"outputPath\": \"./android/www\",
            \"index\": \"src/index.html\",
            \"main\": \"src/main.ts\",
            \"polyfills\": \"src/polyfills.ts\",
            \"tsConfig\": \"tsconfig.app.json\",
            \"inlineStyleLanguage\": \"scss\",
            \"assets\": [
              \"src/favicon.ico\",
              \"src/assets\",
              {
                \"glob\": \"**/*.svg\",
                \"input\": \"./node_modules/ionicicons/dist/ionicicons/svg\",
                \"output\": \"./svg\"
              }
            ],
            \"styles\": [
              \"src/styles.scss\"
            ],
            \"scripts\": []
          },
          \"configurations\": {
            \"production\": {
              \"budgets\": [
                {
                  \"type\": \"initial\",
                  \"maximumWarning\": \"500kb\",
                  \"maximumError\": \"1mb\"
                },
                {
                  \"type\": \"anyComponentStyle\",
                  \"maximumWarning\": \"2kb\",
                  \"maximumError\": \"4kb\"
                }
              ],
              \"fileReplacements\": [
                {
                  \"replace\": \"src/environments/environment.ts\",
                  \"with\": \"src/environments/environment.prod.ts\"
                }
              ],
              \"outputHashing\": \"all\"
            },
            \"development\": {
              \"buildOptimizer\": false,
              \"optimization\": false,
              \"vendorChunk\": true,
              \"extractLicenses\": false,
              \"sourceMap\": true,
              \"namedChunks\": true
            }
          },
          \"defaultConfiguration\": \"production\"
        },
        \"serve\": {
          \"builder\": \"@angular-devkit/build-angular:dev-server\",
          \"configurations\": {
            \"production\": {
              \"browserTarget\": \"iotest:build:production\"
            },
            \"development\": {
              \"browserTarget\": \"iotest:build:development\"
            }
          },
          \"defaultConfiguration\": \"development\"
        },
        \"extract-i18n\": {
          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",
          \"options\": {
            \"browserTarget\": \"iotest:build\"
          }
        },
        \"test\": {
          \"builder\": \"@angular-devkit/build-angular:karma\",
          \"options\": {
            \"main\": \"src/test.ts\",
            \"polyfills\": \"src/polyfills.ts\",
            \"tsConfig\": \"tsconfig.spec.json\",
            \"karmaConfig\": \"karma.conf.js\",
            \"inlineStyleLanguage\": \"scss\",
            \"assets\": [
              \"src/favicon.ico\",
              \"src/assets\"
            ],
            \"styles\": [
              \"src/styles.scss\"
            ],
            \"scripts\": []
          }
        }
      }
    }
  },
  \"defaultProject\": \"iotest\"
}

离子配置

{
  \"defaultProject\": \"iotest\",
  \"projects\": {
    \"iotest\": {
      \"name\": \"iotest\",
      \"integrations\": {
        \"capacitor\": {}
      },
      \"type\": \"angular\"
    }
  }
}

角

角 CLI：12.1.4

节点：16.14.0（不支持）

包管理器：npm 8.3.1

操作系统：win32 x64

角度：12.1.5

... 动画、通用、编译器、编译器-cli、核心、表单

... 平台浏览器、平台浏览器动态、路由器

包版本

-------------------------------------------------- --------

@angular-devkit/架构师 0.1201.4

@angular-devkit/build-angular 12.1.4

@angular-devkit/核心 12.1.4

@angular-devkit/原理图 12.1.4

@角/cli 12.1.4

@原理图/角度 12.1.4

rxjs 6.6.7

打字稿4.3.5

警告：Angular 不支持当前版本的 Node (16.14.0)。

新PM

版本 8.3.1

我的目标是让它使用 SSL 运行，因为将来我需要将它应用于需要使用 HTTPS 运行的应用程序

请检查此链接，可能对您有所帮助。 stackoverflow.com/questions/55647572/…
也许证书问题？你跑ionic ssl generate了吗？
@MayankJoshi 我已经尝试了该帖子上的所有内容，我之前已经看过但似乎没有任何效果:(
@slashsharp 显然这肯定是一个证书问题，但 ssl generate 不是它的解决方案。使用 --ssl 标志运行会自动生成证书，因此这不是真正的问题。此外，我已经拥有自签名和受信任的证书，但无论哪种方式都不起作用:(感谢您的回答

标签： android angular cordova ionic-framework ionic-native

【解决方案1】：

从电容器.config.ts 进行如下更改：

{
  ... 
  server: {
    url: 'https://your-local-ip:8100'
    androidScheme: 'https',
    clearText: true // just for test
  } 
 ... 
}

然后打开两个终端并运行这个命令的：

ionic cap run android -l --external --ssl

从第二个终端运行：

ionic serve 0.0.0.0 --ssl

【讨论】：