Originally published at: Why Your Company Should Build Capacitor Mobile Plugins - Ionic Blog
It’s the modern age of application development. As consumer and business needs for mobile apps continue to grow, organizations that provide technology services must supply integrations and SDKs to keep up with customer demand for mobile app development. Learn how Ionic can partner with your organization to help you build plugins for Capacitor, enabling you…
1 post - 1 participant
Hello guys -
I am receiving this error when using my freshly compiled app on a physical iOS device on XCode. I’ve had a good google about this, but all the other questions seem to pertain to this error on Android, but this is iOS.
App compiles fine and loads. But upon my login, the HTTP request that gets the JWT gets this error:
{“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown Error”,“url”:"",“ok”:false,“name”:“HttpErrorResponse”,“message”:“Http failure response for : 0 Unknown Error”,“error”:{“isTrusted”:true}}
I’ve seen it speculated in other threads that this is a CORS error. Which I will say is unlikely, given the same request works everywhere else on a whole plethora of devices and formats. EDIT: Also the same error when using https://cors-anywhere.herokuapp.com/, so, I think we can rule this out.
Help much appreciated, thanks
Package.json:
{
"name": "store-scanner",
"version": "1.1",
"author": "Adam P. Wright",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"release-build-android": "ionic cap build android --prod --release"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.4",
"@angular/cdk": "^12.2.6",
"@angular/cli": "^12.2.4",
"@angular/common": "^12.2.4",
"@angular/compiler": "^12.2.4",
"@angular/core": "^12.2.4",
"@angular/forms": "^12.2.4",
"@angular/platform-browser": "^12.2.4",
"@angular/platform-browser-dynamic": "^12.2.4",
"@angular/router": "^12.2.4",
"@capacitor-community/barcode-scanner": "^2.0.1",
"@capacitor/android": "3.3.1",
"@capacitor/app": "^1.0.3",
"@capacitor/core": "^3.2.4",
"@capacitor/haptics": "^1.0.3",
"@capacitor/ios": "3.3.1",
"@capacitor/keyboard": "^1.0.3",
"@capacitor/push-notifications": "^1.0.6",
"@capacitor/splash-screen": "^1.1.0",
"@capacitor/status-bar": "^1.0.3",
"@capacitor/storage": "^1.0.3",
"@ionic/angular": "6",
"@ionic/cli": "^6.17.1",
"@ionic/storage-angular": "^3.0.6",
"@swimlane/ngx-charts": "^19.0.1",
"date-fns": "^2.24.0",
"dateformat": "^5.0.1",
"global": "^4.4.0",
"install": "^0.13.0",
"jetifier": "^2.0.0",
"npm": "7.24.1",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.4",
"@angular-eslint/builder": "^12.2.4",
"@angular-eslint/eslint-plugin": "^12.2.4",
"@angular-eslint/eslint-plugin-template": "^12.2.4",
"@angular-eslint/template-parser": "^12.2.4",
"@angular/compiler": "^12.2.4",
"@angular/compiler-cli": "^12.2.4",
"@angular/language-service": "^12.2.4",
"@capacitor/cli": "^3.2.4",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "Vendor's Store Scanner for Wrightway Store"
}
1 post - 1 participant
It can be the dumbest question, but I think not.
Lets imagine you have an app that has a login, donwloads some data and then you can log out.
Lets imagine you have 2 pages. So you step on all of them and you get both pages loaded in the dom, one of them with ion-page-hidden. There you have a variable acessing some data that you know does exists because you did a login. The thing is that, when you are in the second page, you wipe some information, let’s say you do a logout. Then, as in the dom the first page is still loaded, and I assume reactivity is still “running”, there is an error on the first page because data can not be accessed.
That’s not how it is supposed to work in a regular webapp, because the complaining dom is not loaded and you don’t even want it to be.
I’ve read why is it done, but the question is how am I supposed to avoid this issue.
A v-if in the complaining page does not seem to do the job, either.
How to reproduce:
git clone [text](https://github.com/Pijuli/ionic-vue-pinia-fail)
npm ci
npm run serve
go to localhost:8080
Open navigator console
Navigate to the other page with the button
Wipe the data
What to expect:
See console complains
Again, this might be dumb, but I’m not seeing how to proceed with it.
Thank you <3
1 post - 1 participant
I’m learning programming, first of all, I ask you to help me if I’m making a critical mistake.
I’m trying to develop/practice a calculator, where in the last input field the result is displayed.
I have the formula used on a website, but I’m having trouble replicating the references.
The JavaScript code taken from the site is:
;(function( $, window, document, undefined ) {
'use strict';
setTimeout( function(){
$( '.touchevents' ).find( '.js-taphover' ).removeClass( 'js-taphover' );
}, 1000 );
// Calculadora de consumo
var calcQuantity = function( qty, type ) {
var values, qtyFaixa;
qty = parseInt( qty );
if ( type == 'Ceramica / Porcelanato' ) {
values = { 19: 1, 79: 2, 99: 3, 119: 4, 9999: 5 };
}
if ( type == 'Granitos / Outras Pedras' ) {
values = { 19: 1, 49: 2, 69: 3, 90: 4, 109: 5, 9999: 6 };
}
$.each( values, function( index, value ) {
if ( qty <= parseInt( index ) ) {
qtyFaixa = value;
return false;
}
});
return qtyFaixa;
};
$( document ).bind( 'gform_post_render', function( event, form_id, current_page ){
if ( jQuery.inArray( form_id, [7, 8, 9] ) == -1 ) {
return;
}
var selectors = {
'7': {
'fields': '#gform_fields_7 input[type="text"], #gform_fields_7 select',
'revestimento': '#input_7_8',
'aresta_menor': '#input_7_17',
'aresta_maior': '#input_7_18',
'area_aplicacao': '#input_7_14',
'resultado': '#input_7_19'
},
'8': {
'fields': '#gform_fields_8 input[type="text"], #gform_fields_8 select',
'revestimento': '#input_8_8',
'aresta_menor': '#input_8_17',
'aresta_maior': '#input_8_18',
'area_aplicacao': '#input_8_14',
'resultado': '#input_8_19'
},
'9': {
'fields': '#gform_fields_9 input[type="text"], #gform_fields_9 select',
'revestimento': '#input_9_8',
'aresta_menor': '#input_9_17',
'aresta_maior': '#input_9_18',
'area_aplicacao': '#input_9_14',
'resultado': '#input_9_19'
}
};
$( selectors[form_id].fields ).on( 'change input paste', function() {
var revestimento = $( selectors[form_id].revestimento ).val(),
aresta_menor = parseInt( $( selectors[form_id].aresta_menor ).val() ),
aresta_maior = parseInt( $( selectors[form_id].aresta_maior ).val() ),
area_aplicacao = parseInt( $( selectors[form_id].area_aplicacao ).val() ),
$resultado = $( selectors[form_id].resultado ),
result,
C4, C5, D4, D5, D6, D7, D8; // excel cell
C4 = aresta_menor;
C5 = aresta_maior;
D4 = calcQuantity( aresta_menor, revestimento );
D5 = calcQuantity( aresta_maior, revestimento );
D6 = Math.sqrt( area_aplicacao );
D7 = ( D6 / ( C4 / 100 ) );
D8 = ( D6 / ( C5 / 100 ) );
result = ((D7*D4)*(D8-1))+(D8*D5)*(D7-1);
if ( ! isNaN( result ) ) {
$resultado.val( Math.ceil( result ) + ' peças' );
} else {
$resultado.val( '' );
}
});
});
}( jQuery, window, document ));
My HTML page with the form fields is:
<ion-header [translucent]="true">
</ion-header> <!-- Top da página (menu) -->
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<script type="tab1.page.ts"></script> <!-- Script JS -->
<ion-toolbar>
<ion-title size="large">Calculadora</ion-title>
</ion-toolbar>
</ion-header>
<div class="ion-padding">
<h1>
Cálculo de Consumo
</h1>
<p>
Faça o cálculo da quantidade de clipes necessária para sua obra
</p>
<ion-item color="none">
<ion-label position="floating">
Revestimento
</ion-label>
<ion-select type="text">
<ion-select-option class="Ceramica / Porcelanato">Cerâmica / Porcelanato</ion-select-option>
<ion-select-option class="Marmores / Granitos">Mármores / Granitos</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item color="none">
<ion-label position="floating">
Lado X (cm)
</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
<br>
<ion-item color="none">
<ion-label position="floating">
Lado Y (cm)
</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
<br>
<ion-item color="none">
<ion-label position="floating">
Parede Maior (m)
</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
<br>
<ion-item color="none">
<ion-label position="stacked">
{{ resultado }}
</ion-label>
<ion-input type="text"> </ion-input>
</ion-item>
<h5>
Observação: Como as cunhas são reutilizáveis, sugerimos a quantidade de 300 a 400 peças por instalador.
</h5>
</div>
</ion-content>
thank you in advance for the help
1 post - 1 participant
So I have this code:
const onChange = (about: string, value: string) => {
setViewModel({
email: about === 'email' ? value : viewModel.email,
password: about === 'password' ? value : viewModel.password,
})
}
...
return (
<form onSubmit={login}>
<h1 className="ion-text-center">Owner Login</h1>
<IonCard>
<div className='input-wrapper border-bottom'>
<IonInput autocomplete="email" required onIonChange={e => onChange('email', e.detail.value!)} value={viewModel.email} type="email" placeholder="Email" />
</div>
<div className='input-wrapper'>
<IonInput autocomplete="current-password" required onIonChange={e => onChange('password', e.detail.value!)} value={viewModel.password} type="password" placeholder="Password" />
</div>
</IonCard>
<div className="ion-text-center">
<IonButton fill="solid" type="submit">Login</IonButton>
</div>
</form>
)
My code works fine if I just type the email and password manually. If I use autofill from my Android phone (Huawei Nova 5T), somehow the submitted password are wrong. It passes the required attribute check from the form submit, but the value submitted is null / empty. I got Error 400 from my server, this indicates that the required parameter passing is wrong, one of the field is null (when its required).
If I click autofill and backspace the last character from the password then type the last character again, it works.
For example if password is mypassword:
d from mypassword
d at the end of mypasswor
mypassword againThis works. The password passed to the server is correct.
Can anyone tell my if this is a bug? Should I change my code?
1 post - 1 participant
After upgrading my app to ionic 6, I could nolonger build it with --prod --release, but the debug version could build. I get this error when I run -
ionic cordova build browser --prod --release
ERROR:
An unhandled exception occurred: Project target does not exist.
See "/private/var/folders/4w/rxgf0q7j7qj5hmk2ncvnm5140000gp/T/ng-KU4iG3/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.
ng run app:ionic-cordova-build:production --platform=browser exited with
exit code 127.
Re-running this command with the --verbose flag may provide more
information.
The log referenced above has this data:
[error] Error: Project target does not exist.
at findProjectTarget (/Volumes/Projects/business/cryptoy/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:49:15)
at Object.getBuilderName (/Volumes/Projects/business/cryptoy/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:62:46)
at WorkspaceNodeModulesArchitectHost.getBuilderNameForTarget (/Volumes/Projects/business/cryptoy/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:101:35)
at RunCommand.runSingleTarget (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/models/architect-command.js:242:55)
at RunCommand.runArchitectTarget (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/models/architect-command.js:295:35)
at RunCommand.run (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/commands/run-impl.js:15:25)
at RunCommand.validateAndRun (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/models/command.js:136:33)
at async runCommand (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/models/command-runner.js:224:24)
at async default_1 (/Volumes/Projects/business/cryptoy/node_modules/@angular/cli/lib/cli/index.js:70:31)
So to make sure the issue was with my code, I installed a new blank app with ionic start newapp blank, and executed a build with —prod and I got the same exact error.
Here is my ionic info:
Ionic:
Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 6.0.13
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)
Utility:
cordova-res : 0.15.4
native-run : not installed
System:
NodeJS : v14.15.5 (/usr/local/bin/node)
npm : 6.14.11
OS : macOS Mojave
I appreciate your time and help, thank you!
Philip.
1 post - 1 participant
Ionic:
Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1
Cordova:
Cordova CLI : 10.0.0 (cordova-lib@10.1.0)
Cordova Platforms : android 9.1.0
Cordova Plugins : no whitelisted plugins (31 plugins total)
Utility:
cordova-res : 0.15.4
native-run : 1.5.0
System:
NodeJS : v12.22.11 (/Users/pedrojung/.nvm/versions/node/v12.22.11/bin/node)
npm : 6.14.16
OS : macOS Monterey
Xcode : Xcode 13.3 Build version 13E113
plugins are not working…so I checked
platforms - android - app -src - main - assets folder which should contain
plugins folder.
but can’t see it
I forcely put pugins folder and build app then disappeared.
I think it’s because of upgrading target sdk from 29 to 30…
what I just did is config.xml changed 29 to 30 and remove platform aand add android@9.
what may be the problem?
1 post - 1 participant
What is the best versions using LocalNotification for the
Ionic,
Angular,
Node
1 post - 1 participant
Good morning, a couple of years ago we had an application developed with a capacitor and suddenly everything that is white has turned black. In addition, the rest of the colors are not visible either. Any idea what could have happened?
2 posts - 2 participants
Not sure what happened but recently started getting this error when trying to run my app on an android device from the console
[capacitor] ✖ Running Gradle build - failed!
[capacitor] [error] ERR_SUBPROCESS_COMMAND_NOT_FOUND
This is the command I use:
ionic capacitor run android -l --external
It works fine if I build / run it through Android Studio directly.
Is there anyway to debug this to better understand what is the problem here?
General info:
MacOS 12.3 (21E230) (Intel)
Capacitor v3.4.3
Android Gradle Plugin Version 7.1.2
Gradle Version 7.2
Android SDK Build-Tools from 30.0.2 to 33.0.0-rc2
Android SDK Comman-line Tools 6.0
Android SDK Platform Tools 33.0.1
Ionic info:
Ionic:
Ionic CLI : 6.19.0 (/Users/mindaugas/.config/yarn/global/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.13Capacitor:
Capacitor CLI : 3.4.3
@capacitor/android : 3.4.3
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.3Utility:
cordova-res : not installed globally
native-run : 1.5.0System:
NodeJS : v17.8.0 (/usr/local/Cellar/node/17.8.0/bin/node)
npm : 8.5.5
OS : macOS Monterey
3 posts - 2 participants
Ionic:
Ionic CLI : 6.18.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.13
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Latest Dependencies:
@capacitor/cli: 3.4.3
@capacitor/core: 3.4.3
@capacitor/android: 3.4.3
@capacitor/ios: 3.4.3
Installed Dependencies:
@capacitor/android: not installed
@capacitor/cli: 3.4.3
@capacitor/core: 3.4.3
@capacitor/ios: 3.4.3
iOS (version >15.0)
<div class="video-wrapper">
<video height="200" controls autoplay playsinline>
<source src="assets/videos/vid-235-mb.mp4" type="video/mp4" />
</video>
</div>
022-03-25 16:24:08.313078+0530 App[16616:1566152] [Process] 0x1100b4380 - GPUProcessProxy::didClose:
2022-03-25 16:24:08.314109+0530 App[16616:1566152] [Process] 0x1100b4380 - GPUProcessProxy::gpuProcessExited: reason=crash
2022-03-25 16:24:08.317147+0530 App[16616:1566152] [Process] 0x111000920 - [PID=16628] WebProcessProxy::gpuProcessExited: reason=0
2022-03-25 16:24:08.403599+0530 App[16616:1566666] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1
"target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit"
UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-03-25 16:24:08.403698+0530 App[16616:1566666] [ProcessSuspension] 0x1100086d0 -
ProcessAssertion: Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=16631,
error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit"
UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-03-25 16:24:18.156063+0530 App[16616:1566152] [Process] 0x1100644e0 - GPUProcessProxy::didClose:
2022-03-25 16:24:18.157466+0530 App[16616:1566152] [Process] 0x1100644e0 - GPUProcessProxy::gpuProcessExited: reason=crash
2022-03-25 16:24:18.159427+0530 App[16616:1566152] [Process] 0x111000920 - [PID=16628] WebProcessProxy::gpuProcessExited: reason=0
2022-03-25 16:24:18.395119+0530 App[16616:1567234] [assertion] Error acquiring assertion: <Error Domain=RBSAssertionErrorDomain Code=2
"Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}>
2022-03-25 16:24:18.395197+0530 App[16616:1567234] [ProcessSuspension] 0x1100088b0 -
ProcessAssertion: Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=16633,
error: Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist"
UserInfo={NSLocalizedFailureReason=Specified target process does not exist}
npm --version output: 6.14.13
node --version output: v14.17.3
pod --version output (iOS issues only): 1.11.2
3 posts - 2 participants
So as you see on my screens . i am using ion-slides with 1.3 slidesperview but the issue is when we move on to last ion-slide it starts to the mid of the body but i want it to the very left start of body.
1 post - 1 participant
Hi there,
Loving the new sheet modal, was just wondering if it is possible to dynamically update the “current” breakpoint value of the modal from code? Would like to have one modal open, then on some event, change the current position. Any thoughts on that?
Appreciate any ideas and/direction to achieve this effect.
Thanks!
3 posts - 2 participants
Hi, I’m using the Capacitor Camera Plugin in the web using PWA elements.
Is there a configuration to dismiss the action sheet when clicking on the backdrop?
I saw that <pwa-action-sheet> has an attribute cancelable that I could set to "true" in order to solve my problem… I’m trying to find the way to access to it…
1 post - 1 participant
Hi,
i’m trying to build an app with Ionic 6 (Angular, Tabs-App). I am facing a weird problem with the toolbar. After routing to another page, the toolbar styling applies just a few seconds after the page is loaded. I have recorded this behaviour: RPReplay Final1648194229 GIF | Gfycat
Does anyone have a solution for this problem? I couldn’t find anything about this topic.
Thanks in advance!
Adrian
4 posts - 2 participants
Is it possible with capacitor or ionic to align an icon to the bottom of the splash screen?
It should look i.e. like this:
There is one icon in the center and one icon in the bottom of the screen.
Is there a way to achieve this?
3 posts - 2 participants
Originally published at: Improved Native Versioning and White Labeling Enhancements
I’m happy to announce the addition of two new features to the Ionic Cloud CLI: Live Update channel creation for easier native visioning and native configuration creation for white label enhancements. These additions make it easier to automate the deployment of your Ionic, Cordova, and Capacitor apps. The Cloud CLI provides the ability to use…
2 posts - 2 participants
I’m a little green to Ionic/Angular and am not entirely sure where the dividing line between the two is so…
Angular CLI: 9.1.2
OS: win32 x64
Angular: 9.1.13
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router, service-worker
Ivy Workspace: Yes
@angular-devkit/architect 0.803.29
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.2.4
@angular-devkit/schematics 10.2.4
@angular/http 7.2.16
@ngtools/webpack 10.0.8
@schematics/angular 13.3.0
@schematics/update 0.901.2 (cli-only)
rxjs 6.6.7
typescript 3.8.2
webpack 4.43.0
Using “ionic serve” at the command line, my app seems to compile with no errors present in the terminal window. At the completion of compiling in the terminal window, a browser (chrome) tab is opened and I can see my favicon in the tab but the browser tab is blank. F12 shows the console and this is what it says:
Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!
I’ve googled every piece of this message and gone down some trippy rabbit holes and I always come back to this. I’m sure this isn’t enough info to get the help I need so I’m happy to provide whatever details I can. Thanks in advance.
Joe
1 post - 1 participant
When the user interacts and selects a value in the select, or input of type file, the values of the other fields of the form disappear. Has anyone had this problem? How to solve it? I use the latest version of ionic with react.
1 post - 1 participant
Hello,
I hope you can help me. I have the problem that when I try to access an object, ion-content is not displayed completely, but compressed as shown in the picture.
What can I do to prevent this. If you need any more information I can provide it.
I am new to this topic.
Thank you very much.
1 post - 1 participant
