実行時エラー

空白のアプリ

(アイコン省略) 注記

アプリにエラーはありません。 なぜ空白の画面が表示されるのですか？

これにはいくつかの異なる理由が考えられます。 Ionic フォーラムで解決策が見つからない場合は、次の点を確認してください。

• 古いブラウザ/バージョンの Android にはポリフィルが含まれていません

@angular/cli@7.3 以上のプロジェクトでは、ポリフィルが自動的に含まれます。それ以前に作成されたプロジェクトでは、ポリフィルを手動で有効にする必要があります。

src/polyfills.ts で、Android 4.4 をサポートするためにすべての ES6 ポリフィルを有効にする必要があります。

または、プロジェクトを更新して @angular/cli パッケージと @angular-devkit パッケージの最新リリースを使用し、angular.json のビルドオプションオブジェクトに es5BrowserSupport オプションを含めることもできます。

        "input": "src/global.scss"
      }
    ],
-   "scripts": []
+   "scripts": [],
+   "es5BrowserSupport": true
  },
  "configurations": {
    "production": {

これにより、必要とする古いブラウザのポリフィルが自動的に含まれます。

ディレクティブが機能しない

(アイコン省略) 注記

カスタムコンポーネント/ディレクティブが機能しないのはなぜですか？

確認できることがいくつかあります。次の点を確認してください。

• セレクターにスペルミスがないこと。
• 属性、要素、またはクラスとしてセレクターを正しく使用していること。
• セレクターに適切な構文があること
  • 属性セレクターの場合は [attr]
  • 要素セレクターの場合は `element`
  • クラスセレクターの場合は `.class`

属性セレクターを使用した例を次に示します。

@Directive({
  selector: '[my-dir]' // <-- [my-dir] because it is an attribute
})                     // Could be my-dir, [my-dir], .my-dir
class MyDir {
  constructor() {
    console.log('I'm alive!');
  }
}

@Component({
  // We add my-dir as an attribute to match the directive's selector
  template: `<div my-dir>Hello World</div>`,

  // Alternatively, if you were attaching the directive to an element it would be:
  // template: `<my-dir>Hello World</my-dir>`
  // and if you were attaching by class the template would be:
  // template: `<div class="my-dir">Hello World</div>`

  directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0)
})
class MyPage { }

クリックの遅延

(アイコン省略) 注記

クリックイベントに遅延があるのはなぜですか？

一般的に、通常クリック可能な要素にのみ (click) イベントを追加することをお勧めします。 これには、<button> 要素と <a> 要素が含まれます。 これにより、スクリーンリーダーが要素がクリック可能であることを認識できるため、アクセシビリティが向上します。

ただし、通常はクリックできない要素に `(click)` イベントを追加する必要がある場合があります。 これを行うと、要素をクリックしてからイベントが発生するまでに `300ms` の遅延が発生する場合があります。 この遅延を削除するには、要素に `tappable` 属性を追加します。

<div tappable (click)="doClick()">I am clickable!</div>

Angular 変更検出

(アイコン省略) 注記

コンポーネントの初期化時に Angular の変更検出が非常に頻繁に実行されるのはなぜですか？

Angular は、変更検出をいつ実行するかを判断するのに役立つ zone.js と呼ばれるライブラリを使用しています。

zone.js `0.8.27` 現在、Web コンポーネントの特定の API も変更検出の実行を引き起こします。これは、多数のコンポーネントが初期化されているときにアプリの速度が低下するという望ましくない副作用をもたらす可能性があります。

これを防ぐために、変更検出のこの部分を管理する zone.js フラグを無効にすることができます。 アプリケーションの `src` ディレクトリに、`zone-flags.ts` というファイルを作成します。 次のコードをファイルに配置します。

(window as any).__Zone_disable_customElements = true;

次に、`zone-flags.ts` ファイルをアプリケーションの `polyfills.ts` ファイルにインポートする必要があります。 `zone.js` がインポートされる *前に* インポートしてください。

...

import './zone-flags.ts';
import 'zone.js/dist/zone'; // Included with Angular CLI

...

この変更は、zone.js `0.8.27` 以降に依存するアプリケーションにのみ影響します。 古いバージョンは、この変更の影響を受けません.

(アイコン省略) 注記

このフラグは、Ionic CLI を介して Ionic アプリを作成するときに自動的に含まれます.

Ionic CLI を使用。

ブラウザで Cordova プラグインが機能しない

開発のある時点で、Cordova プラグインを呼び出そうとすると、警告が表示される場合があります。

[Warning] Native: tried calling StatusBar.styleDefault, but Cordova is not
available. Make sure to include cordova.js or run in a device/simulator
(app.bundle.js, line 83388)

これは、ネイティブプラグインを呼び出そうとしたが、Cordova が使用できない場合に発生します。 幸いなことに、Ionic Native はエラーではなく、適切な警告を出力します.

Ionic Native を介してプラグインが使用されていない他のケースでは、プラグインのはるかに不明瞭な警告を出力する可能性があります.

EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
(evaluating 'navigator.camera.getPicture')

これが発生した場合は、実際のデバイスまたはシミュレーターでプラグインをテストしてください.

プロバイダーの複数のインスタンス

すべてのコンポーネントで使用できるようにするために、すべてのコンポーネントにプロバイダーを挿入すると、プロバイダーのインスタンスが複数作成されます。 子コンポーネントで使用できるようにする場合は、親コンポーネントにプロバイダーを一度挿入する必要があります.

let id = 0;
export class MyService {
  id: number;

  constructor() {
    this.id = id++;
  }
}

@Component({
  selector: 'my-component',
  template: 'Hello World',
  providers: [MyService], // <-- Creates a new instance of MyService :(
}) // Unnecessary because MyService is in App's providers
class MyComp {
  // id is 1, s is a different MyService instance than MyApp
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

@Component({
  template: '<my-component></my-component>',
  providers: [MyService], // MyService only needs to be here
  directives: [MyComp],
})
class MyApp {
  // id is 0
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

関数コールバックで this にアクセスすると undefined が返される

ion-input の counterFormatter や ion-range の pinFormatter など、特定のコンポーネントでは、開発者がコールバックを渡すことができます。 コールバックのコンテキスト内から `this` にアクセスする予定がある場合は、正しい `this` 値をバインドすることが重要です。 Angular コンポーネントを使用する場合、または React でクラスコンポーネントを使用する場合に、`this` にアクセスする必要がある場合があります。 `this` をバインドするには 2 つの方法があります。

`this` をバインドする最初の方法は、関数インスタンスで `bind()` メソッドを使用することです。 `counterFormatterFn` と呼ばれるコールバックを渡す場合は、`counterFormatterFn.bind(this)` と記述します.

`this` をバインドする 2 番目の方法は、コールバックを定義するときに アロー関数 を使用することです。 これは、JavaScript がアロー関数に対して新しい `this` バインディングを作成しないため機能します.

JavaScript での `this` の仕組みの詳細については、MDN ページ を参照してください.