Issue solved dear…?
↧
Ionic 3 Firebase Phone Authentication not working on phone
↧
Apple review found problems on iPad running iOS 12.3.1 (ionic 3)
I am also facing the same issue, I thought it only happen with me, and I was so worried because I recently bought my iPad from ReeCoupons, and I thought there is any problem occur in mat Ipad, but after reading your post I feel much relax that its an official issue.
↧
↧
Loading chunk failed - Ionic 3
I am using lazy loading in Ionic 3. I have created a build using npm run build --aot --minifyjs --minifycss --output-hashing=all and uploaded it to server.
Error-
Loading chunk failed.
We are facing Loading chunk failed in our web build, in only one of the users system.
- We tried creating a new build thinking it will resolve the issue.
- We also cleared cache of browser , we even uninstalled and reinstalled chrome but problem in the system is still there.
- Other projects of ours are working fine on this same system which are not built using lazy loading.
This is the code which is used to open a page,but on clicking instead of opening, it gives error
this.navCtrl.push('LinksetupPage');
Expected behaviour is, it should open the page.
Error coming -Loading chunk Failed
Please help, thanks in advance for your time.
↧
Ionic 4 custom themes for components
I don’t understand how to apply custom themes. For example to make all popovers a certain width.
I’ve read the theming section of the docs a stack of times but I don’t get it. I can change and define my own colours successfully (but don’t ask me how to use, for example, --ion-color-favorite-shade - the docs done help me with that )
What I need to do now is play with width and height of popovers e.g. set the --min-width of popovers to 50%. I would like to do this for all popovers (and maybe eventually work out how to do it for just one popover).
My guess is I need to add under root: in variables.css something like…
.ion-popover-class {
–min-width:90%;
–min-height:90%;
}
Can anyone help me with this? Thanks
↧
After gradle update, my project is not building
Thanks @addwebsolution ,
It works. gradlew --info build clean
↧
↧
IONIC 4- How to use a file in ng-model with MySQL and PHP
My case is the following: ON IONIC 4
My application sends data to an MSQL table, what I want is that it also sends the image to a server and inserts the name of the image to the same table. With the other data there is a type “file” can be used in the ng model?
I can not do it in a single insert (Data-name of image - upload image to the server).
My form is the following:
<form (ngSubmit)="logForm()">
<ion-item>
<ion-label position="floating" color="danger" >Name:</ion-label>
<ion-input color="primary" type="text" [(ngModel)]="datos.nombre"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating" color="danger">CELPHONE:</ion-label>
<ion-input color="primary" type="text" [(ngModel)]="datos.telefono"></ion-input>
</ion-item>
<ion-button expand="block" type="submit" color="danger" >SEND</ion-button>
</form>
My ts is:
public datos: any = {};
apiUrl='http://072atizapan.mx/index.php/'
logForm() {
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' )
let newData={
funcion: 'police',
datos: this.datos
}
this.http.post(this.apiUrl, JSON.stringify(newData))
.subscribe(data=>{
console.log(data);
if(data==='true'){
console.log('return');
this.presentAlert();
this.router.navigateByUrl('');
}else{
this.presentAlert();
this.router.navigateByUrl('');
}
},
(err)=>{
this.presentAlert2();
console.log(err);
}
);
}
My php is the following:
if($_SERVER['REQUEST_METHOD'] !== 'POST'){
echo json_encode(array('status' => false));
exit;
}
$postdata = file_get_contents("php://input");
$datos=json_decode($postdata, true);
switch ($datos['funcion']) {
case 'police':
police($datos);
break;
default:
break;
}
function police($datos){
$query="INSERT INTO `policias`(`nombre`, `telefono`,) VALUES ('{$datos['datos']['nombre']}','{$datos['datos']['telefono']}')";
execQuery3($query);
}
The previous thing already makes insert to the table but as it would be done so that the name of the image is inserted and at the same time the image is uploaded to a folder using NG MODEL FILE but everything is done in a single insert.
↧
Is there a possible way to share variables from typescript to scss
i wanna send variables to scss.
how can i do that?
for example at first i get colors from database than i wanna push it to scss …
↧
Simple ionic 3 star rating component
This feature has been included in the latest upgraded version.
Please upgraded to the latest version
npm install ionic3-star-rating@2.0.1
↧
Simple ionic 3 star rating component
This feature has been included in the latest upgraded version.
Please upgraded to the latest version
npm install ionic3-star-rating@2.0.1
Use inside component and just make use reset() function of the FromGroup
↧
↧
Component is not a known element
Hi guys,
I have this problem with my IONIC 4 app.
Have a component that if I import into module of a page, works:
import { NgModule } from '@angular/core';
import { MenuHeaderModule } from '../menu-header/menu-header.module';
import { SharedModule } from '../shared/shared.module';
import { HomePage } from './home-page/home.page';
import { HomePageRoutingModule } from './home-routing.module';
@NgModule({
imports: [
SharedModule,
HomePageRoutingModule,
**MenuHeaderModule**
],
declarations: [
HomePage
]
})
export class HomePageModule { }
But, if import this Module into Core, have this error: ‘strs-menu-header’ is not a known element
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MenuHeaderModule } from '../menu-header/menu-header.module';
@NgModule({
declarations: [ MenuHeaderModule ],
imports: [
SharedModule
],
exports: [MenuHeaderModule]
})
export class CoreModule { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import {
IonicModule,
IonicRouteStrategy
} from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { StrsComponent } from './strs.component';
import { StrsRoutingModule } from './strs-routing.module';
import { CoreModule } from './core/core.module';
@NgModule({
declarations: [StrsComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
StrsRoutingModule,
CoreModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [StrsComponent]
})
export class StrsModule { }
Any idea?
↧
Ionic4-star-rating
I just created a custom star rating component for ionic-4 projects
You can give your custom icons, custom color, custom font-size and also make it read only. Can use it multiple times in a single page/multiple pages and get the changed rating in the parent component Can also be used inside the <form> component
Easy to integrate with your ionic-4 projects.
<ionic3-star-rating #rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
rating="3"
fontSize = "32px"
(ratingChanged)="logRatingChange($event)">
</ionic3-star-rating>
for detailed documentation :
npm link
↧
How to use rating star in ionic4?
Hello @demokumar
I have created another package for ionic-4 projects.
Please have a look
Thanks,
Melwin Vincent C
↧
Ionic 4 star rating - styling
Hello @madeymaja
i have created a new package that solves all your issues .
Please have a look.
Regards,
Melwin Vincent C
↧
↧
Ionic-native/image-picker not works ((
Good day! I make a multi-selection of images from the gallery in the application. I use @ionic-native/image-picker@4. When you select one image everything works fine but if you select two or more images the app crush. Help please.
This is my code:
fromGallery() {
let options: ImagePickerOptions = {
quality: 100,
width: 600,
height: 600,
outputType: 1,
maximumImagesCount: 15
};
this.imagePicker.getPictures(options).then((results) => {
console.log('Results', results);
for (let index = 0; index < results.length; index++) {
this.imgs.push('data:image/jpeg;base64,' + results[index]);
}
console.log('Image Lists', this.imgs);
}, (error) => {
console.log('Error occurred while loading', error);
});
}
package.json:
{
"name": "zaholod",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/camera": "^4.19.0",
"@ionic-native/core": "~4.18.0",
"@ionic-native/fcm": "^4.19.0",
"@ionic-native/geolocation": "^4.19.0",
"@ionic-native/http": "^4.19.0",
"@ionic-native/image-picker": "^4.19.0",
"@ionic-native/splash-screen": "~4.18.0",
"@ionic-native/status-bar": "~4.18.0",
"@ionic/storage": "2.2.0",
"cordova-android": "7.0.0",
"cordova-browser": "5.0.4",
"cordova-plugin-advanced-http": "^2.0.2",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-fcm-with-dependecy-updated": "^2.4.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.3.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-telerik-imagepicker": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.1",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-advanced-http": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-camera": {},
"cordova-plugin-telerik-imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "your usage message"
},
"cordova-plugin-fcm-with-dependecy-updated": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
}
},
"platforms": [
"browser",
"android"
]
}
}
↧
Ionic native http post formdata
I have been trying to send formdata through my ionic application. Native http is establishing the connection with server but I am unable to send formdata. I have tried angular HttpClient and xmlHttpRequest but they are unable to establish connection to the server.
I have tried setting proxy in ionic.config.json, but that didnt work either.
I have set in config.xml and in index.html
I have removed and added the cordova whitelist plugin
But nothing seems to work.
I now get and internal server error with response status : 500
my ionic.config.json:
{
"name": "app",
"integrations": {
"cordova": {}
},
"type": "ionic-angular",
"proxies": [{
"path": "/api",
"proxyUrl": "https://myurl.com/"
}]
}
ionic native http:
this.http.post('/api',formData , {headers:headers})
.then(res=>alert("http res: "+JSON.stringify(res)))
.catch(err=>alert("http err: "+JSON.stringify(err)))
I am not sending any data through angular httpClient or xhr request since I am trying to work with them to establish connection first.
angular httpClient:
this.httpClient.post('/api',{} , {}).subscribe(
res=>{
console.log("response : "+JSON.stringify(res));
},
err=>{
console.log("send error : "+JSON.stringify(err))
});
xhr request:
var xhr = new XMLHttpRequest();
xhr.open('POST', https://myurl.com/);
xhr.onload = function() {
if (xhr.status != 200) {
alert(`Error ${xhr.status}: ${xhr.statusText}`);
} else { // show the result
alert(`Done, got ${xhr.response.length} bytes`);
}
};
xhr.onerror = function(e) {
alert(JSON.stringify(e));
};
xhr.send();
my formdata entry structure is (key,blobFile,filename)
current error:
{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":500,"statusText":"Internal Server Error","url":"http://localhost:8100/api","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:8100/api: 500 Internal Server Error","error":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Error: getaddrinfo ENOTFOUND myurl.com myurl.com:443<br> at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)</pre>\n</body>\n</html>\n"}
I am not able to understand the issue and resolve it
It would have been much simpler if I could send formdata through native http.
↧
Ion-select text wrap not working-How to overwrite the white-space property
Came across this issue myself today; the correct way to do it is to set the [selectOptions] with a cssClass value
- https://ionicframework.com/docs/v3/api/components/select/Select/#select-options
- https://ionicframework.com/docs/v3/api/components/alert/AlertController/#advanced
You can then target this directly in the app.scss:
ion-alert {
&.yourClass{
.alert-radio-label {
white-space: unset;
}
}
}
↧
V4 Toolbar background color in old androids
Anybody? May be I bad described my problem?
↧
↧
Unable to navigate back
How are you navigating to chat details page?
Are you using this.navCtrl.setRoot(chatdetailspage) or this.navCtrl.push(chatdetailspage) ?
↧
Opening pages with ngFor
Can you try this
<ion-list *ngFor=“let item of items”>
{{item.component}}
<ion-item *ngFor="let person of people” (click)="“openPage(item)">
{{person.lesson_d.name}}
</ion-item>
</ion-list>
↧
Unable to navigate back
Hi, Thanks for the reply I am using this.navCtrl.setRoot(chatdetailspage).
↧