From 06b2f1753854ed0a360268c43d4b2e413c73524d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 18 Dec 2023 15:20:39 -0500 Subject: [PATCH 1/7] docs: show how to account for this --- docs/troubleshooting/runtime.md | 11 + .../version-v7/troubleshooting/native.md | 234 +++++++++++++----- 2 files changed, 187 insertions(+), 58 deletions(-) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md index 6163d233ef5..5595e10748b 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.md @@ -207,3 +207,14 @@ class MyApp { } } ``` + + +## Accessing `this` in a function callback returns `undefined` {#accessing-this} + +Certain components, such as [counterFormatter on ion-input](../api/input#counterformatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that developers bind the correct `this` value if they plan to access `this` from within the context of the callback. Developers may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: + +The first way to bind `this` is to use the `bind()` method on a function instance. If a developer wanted to pass a callback called `counterFormatterFn`, then they would write `counterFormatterFn.bind(this)`. + +The second way to bind `this` is to use an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) when defining the callback. This works because JavaScript does not create a new `this` binding for arrow functions. + +See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this for more information on how `this` works in JavaScript. diff --git a/versioned_docs/version-v7/troubleshooting/native.md b/versioned_docs/version-v7/troubleshooting/native.md index 3cc2f58e051..5595e10748b 100644 --- a/versioned_docs/version-v7/troubleshooting/native.md +++ b/versioned_docs/version-v7/troubleshooting/native.md @@ -1,102 +1,220 @@ --- -title: Native Errors +title: Runtime Issues --- - Native App Errors: How to Resolve Native Errors on Ionic Apps + Solve App Runtime Issues: Blank App, Plugins Not Working, etc. -## Code Signing errors +## Blank App -```shell -Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' +:::note +I have no errors in my app. Why does it show a blank screen? +::: + +There are several different reasons this can happen. If you are unable to find a solution on the [Ionic forums](https://forum.ionicframework.com), make sure: + +- Polyfills are not included for older browser/versions of android + +For projects with `@angular/cli@7.3` or above, polyfills will automatically be included. For project created before that, polyfills need to be manually enabled. + +In `src/polyfills.ts`, you must enabled all ES6 polyfills for Android 4.4 support. + +Alternatively, a project could be updated to use the latest release of the `@angular/cli` package & `@angular-devkit` packages and include the `es5BrowserSupport` option in the `angular.json`'s build options object: + +```diff + "input": "src/global.scss" + } + ], +- "scripts": [] ++ "scripts": [], ++ "es5BrowserSupport": true + }, + "configurations": { + "production": { ``` -Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: +This will automatically include the polyfills for older browsers that need them. -1. Set the [Package ID](../reference/glossary.md#package-id). +## Directive Not Working - For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. +:::note +Why is my custom component/directive not working? +::: - For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. +There are a few things you can check. Make sure: -2. - Open the project in Xcode. - +- Your selector doesn't have any misspellings. +- You're using the selector correctly as an attribute, element or class. +- Your selector has the proper syntax: + - `[attr]` if it's an attribute selector + - `element` if it's an element selector + - `.class` if it's a class selector - For Capacitor, run the following to open the app in Xcode: +Here's an example using an attribute selector: - ```shell - $ ionic capacitor open ios - ``` +```tsx +@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!'); + } +} - For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. +@Component({ + // We add my-dir as an attribute to match the directive's selector + template: `
Hello World
`, -3. - In Project navigator, select the project root to open the project editor. Under the **Identity** section, - verify that the Package ID that was set matches the Bundle Identifier. - + // Alternatively, if you were attaching the directive to an element it would be: + // template: `Hello World` + // and if you were attaching by class the template would be: + // template: `
Hello World
` - ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) + directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0) +}) +class MyPage { } +``` -4. - In the same project editor, under the Signing section, ensure Automatically manage signing is - enabled. - Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning - and signing. +## Click Delays - ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) +:::note +Why is there a delay on my click event? +::: -## Xcode build error 65 +In general, we recommend only adding `(click)` events to elements that are +normally clickable. This includes `