标签: ionic4

我正在使用 Ionic 4 和 Angular 8 构建移动应用程序，但无法使我的 HTTP 拦截器正常工作。我在这里查看了拦截器的所有示例，但没有一个适合我的需要，或者根本不再起作用。

与常规 Angular 8 版本的唯一区别是从存储中读取令牌的第一行。原始的 Angular 8 代码同步读取这些东西并且不需要订阅因此它可以工作。这里是 Ionic 存储，它以异步方式调用本地资源。

这是我的代码：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  from(this.storage.get('id_token')).subscribe(res => {
    const idToken = res;
    if (idToken) {
      const cloned = req.clone({ headers: req.headers.set('token', idToken)});
      return next.handle(cloned);
    } else {
      console.log('Unauthorized calls are redirected to login page');
      return next.handle(req).pipe(
        tap(
          event => {
            // logging the http response to browser's console in case of a success
            if (event instanceof HttpResponse) {
              // console.log('api …

我正在使用 ionic 4，我想得到如下图所示的结果：

我正在尝试构建一个 ionic 项目，当我尝试使用该命令时，
ionic capacitor run android
我收到一条错误消息，
[error] Unable to find node_modules/cordova-plugin-whitelist. Are you sure cordova-plugin-whitelist is installed? [ERROR] An error occurred while running subprocess capacitor.
我已检查是否安装了cordova-plugin-whitelist，它是
Plugin "cordova-plugin-whitelist" already installed on android. Adding cordova-plugin-whitelist to package.json
如何解决这个问题的？

我正在学习 ionic 并且在编写命令时遇到以下问题

ionic build

我想生成文件夹www

https://github.com/jquishpe/imagenionic/blob/master/error1.png

C:\Personal\ionic\platzi-music>ionic build
> ng.cmd run app:build
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "C:\Users\HITSS\AppData\Local\Temp\ng-sOfQFc\angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build exited with exit code 127.

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

ionic build --verbose

https://github.com/jquishpe/imagenionic/blob/master/error2.png

文件内容 C:\Users\HITSS\AppData\Local\Temp\ng-sOfQFc\angular-errors.log

[error] Error: Call retries were exceeded
    at ChildProcessWorker.initialize (C:\Personal\ionic\platzi-music\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
    at ChildProcessWorker.onExit (C:\Personal\ionic\platzi-music\node_modules\jest-worker\build\workers\ChildProcessWorker.js:263:12)
    at ChildProcess.emit …

我正在使用ionic 4.7.0.

我报告的问题发生在 Chrome 和 Firefox 上。

实际行为：

使用ion-select带有选项的大名单，当您打开警报，ion-select不会自动滚动到选定的值。用户看到选项列表中的第一个值，他可能认为没有选择任何内容

预期行为：

当警报打开时，视图会自动以所选值为中心

我创建了这个stackblitz来突出显示行为，我们可以在 stackblitz 上看到在加载视图时，选定的值是11:00但是当您打开警报（通过单击 ion-select）时，我希望视图会自动滚动选定的值。

这是离子选择的预期行为吗？

我发现了一些关于同一主题的问题，但没有什么能真正回答这个问题：

• Ion-select 在 Ionic 3 中不滚动：这个给出了一个 CSS 的解决方案，它不能与 ionic 4 一起使用，因为 ionic 4 使用了不可修改的 web 组件

• 离子选择不显示 FormBuilder (Ionic 3) 的选定选项：同上

• https://github.com/ionic-team/ionic-v3/issues/1005：一些带有 ion-select 的滚动错误，应该用 ionic 3.9.5 修复，所以我想这不是同一个问题

我正在使用Ionic和React来开发应用程序。我找不到任何关于如何处理硬件后退按钮点击以及如何退出应用程序的文档。有没有关于这个的文档或教程？

对于我的项目，我使用Ionic了Angular. 当我的 ionic 项目第一次渲染时，加载时间太慢了。出现此问题是因为当项目first呈现时，加载所有js文件需要时间。那么我如何更快地加载“js”文件，这将提高我的离子项目的加载性能。如果有人知道加载时间慢得多的更好原因，请告诉我原因和解决方案。

我想在聚焦时ion-label在ion-itemwith内改变颜色ion-input。

我可以更改ion-itemusing的高亮颜色，--highlight-color-focused: yellow;但无法更改label颜色。

它将标签的默认颜色显示为主要颜色，但我想将其更改为“警告”，或者如果需要任何自定义颜色。

我已经尝试了以下解决方案，该解决方案在 Ionic github 存储库中提到过同样的问题，但没有解决我的问题。

https://github.com/ionic-team/ionic/issues/18531

以下代码我使用过

登录页面.html

<ion-content>
  <div class="logo">
    <div class="logoCenter">
      <ion-icon name="sync"></ion-icon>
    </div>
    <h1 style="font-family: ProximaBold; color: white">Sample Application</h1>
  </div>

  <ion-grid style="margin-top: 10vh;">
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label class="loginLabel" position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col class="ion-text-center" size="12">
        <ion-button expand="full" shape="round" [routerLink]="['/home']">Submit</ion-button>
        <p style="color: white;">Forgot Password?</p>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p …

我正在运行我的 Ionic 4 应用程序ionic cordova run android，它在我的设备上构建和运行良好。

但是，现在我尝试通过运行来安装Firebase X：

ionic cordova plugin add cordova-plugin-firebasex
npm install @ionic-native/firebase-x

然后我将此添加到我的app.module.ts：

import { FirebaseX } from '@ionic-native/firebase-x/ngx';

providers: [
    FirebaseX,
]

仅进行这些更改后，我运行ionic cordova run android，但它失败并且以下内容记录到控制台：

FAILURE：构建失败，出现异常。

• 出了什么问题：任务 ':app:transformDexArchiveWithExternalLibsDexMergerForDebug' 执行失败。

  com.android.builder.dexing.DexArchiveMergerException：合并 dex 档案时出错：.dex 文件中的方法引用数不能超过 64K。在https://developer.android.com/tools/building/multidex.html了解如何解决此问题

• Try:37 可操作任务：37 个已执行

使用 --stacktrace 选项运行以获取堆栈跟踪。使用 --info 或 --debug 选项运行以获得更多日志输出。使用 --scan 运行以获得完整的见解。

• 在https://help.gradle.org获取更多帮助

BUILD FAILED in 25s C:\Users\damie\Documents\Ionic\my-mechanic\platforms\android\gradlew: 命令失败，退出代码 1 错误输出：注意：某些输入文件使用或覆盖已弃用的 API。注意：使用 -Xlint:deprecation 重新编译以获取详细信息。注意：C:\Users\damie\Documents\Ionic\my-mechanic\platforms\android\app\src\main\java\org\apache\cordova\file\AssetFilesystem.java 使用未经检查或不安全的操作。注意：使用 -Xlint:unchecked 重新编译以获取详细信息。D8：无法在单个 …

android 构建时出错

<provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider;${applicationId}.bugshaker.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths" ></meta-data>
        </provider>

错误信息是：

android\app\src\main\AndroidManifest.xml:39:13-41:65: AAPT: 错误: 找不到资源 xml/opener_paths (aka io.ionic.starter:xml/opener_paths)。