This didn’t help me at all, I installed the plugin and added
<preference name="keyboardResize" value="false" />
to config.xml but nothing helped. My background image is inserted in a div, when I put it in a ion-content it gets zoomed in and that’s another bug I tried to workaround but also zero luck with that too. If anyone knows anything about this please help me
Did you find any solution?
Hello everyone,
I recently created an Ionic project using the Ionic 4 Beta version… (before Ionic 4 was released) Everything was working perfectly fine until I wanted to try updating the dependencies, including Ionic. So, I ran npm update in the Ionic project. Ever since then, I’ve been unable to run the project itself and get the error:
> ng run app:serve --host=0.0.0.0 --port=8100
[ng] Cannot find module './scalar'
[ng] Error: Cannot find module './scalar'
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:508:25)
[ng] at Module.require (internal/modules/cjs/loader.js:637:17)
[ng] at require (internal/modules/cjs/helpers.js:22:18)
[ng] at Object.<anonymous> (/Users/tateberenbaum/Documents/bitswipe/bitswipe/node_modules/rxjs/internal/observable/of.js:6:16)
[ng] at Module._compile (internal/modules/cjs/loader.js:701:30)
[ng] at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
[ng] at Module.load (internal/modules/cjs/loader.js:600:32)
[ng] at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:531:3)
[ERROR] ng has unexpectedly closed (exit code 1).
The Ionic CLI will exit. Please check any output above for error details.
After this, I’ve tried to run npm install scalar but that failed to solve the issue. If anyone knows what might be wrong, please tell me! This project is currently on a private GitHub repository, but if anyone would like to see the code in order to help me fix the error, please let me know and I’ll invite you.
Thanks,
Tate
You haven’t shown us code with an ion-content or a search bar…
Excuse me, here you are
<ion-content>
<ion-searchbar [animated]="true" showCancelButton="true" ></ion-searchbar>
<ion-item button="true" >
<ion-list >
<ion-item button="true" routerLink='/dettaglievento' routerDirection='forward' >
<ion-thumbnail slot="start" >
<img width="63" height="50" src="../assets/musipr/LOGO2.JPG">
</ion-thumbnail>
<ion-label >
<h2 >Vasco</h2>
<p>Il mondo che vorrei</p>
<p>Dom-25 Mag</p>
<ion-icon class=iconcina name="ios-contact" ></ion-icon>
</ion-label>
</ion-item>
</ion-list>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" >
<ion-fab-button color="white" routerLink="/login" routerDirection="root">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I also noticed that if i put the searchbar or the item in the header they work perfectly
Hey,
Did you find a solution to integrate rethinkDB in a ionic app ?
I have the same need and i don’t find resources.
Thanks
For anyone experiencing this issue, I fixed it by running:
rm -rf node_modules
Hi, completed a fresh install on my Mac and hitting the following error stack when I run ionic serve: (interestingly when I ran ionic start MyApp tabs i didn’t get any prompts to help configure the app as per the docs).
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module ‘node-sass’
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:562:25)
[ng] at Module.require (internal/modules/cjs/loader.js:690:17)
[ng] at require (internal/modules/cjs/helpers.js:25:18)
[ng] at Object.sassLoader (/Users/chris/sonic/node_modules/sass-loader/lib/loader.js:46:72)
[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/theme/variables.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module ‘node-sass’
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:562:25)
[ng] at Module.require (internal/modules/cjs/loader.js:690:17)
[ng] at require (internal/modules/cjs/helpers.js:25:18)
[ng] at Object.sassLoader (/Users/chris/sonic/node_modules/sass-loader/lib/loader.js:46:72)
[ng] ERROR in ./src/app/app.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/app/app.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module ‘node-sass’
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:562:25)
[ng] at Module.require (internal/modules/cjs/loader.js:690:17)
[ng] at require (internal/modules/cjs/helpers.js:25:18)
[ng] at Object.sassLoader (/Users/chris/sonic/node_modules/sass-loader/lib/loader.js:46:72)
[ng] ERROR in ./src/app/tab1/tab1.page.scss
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module ‘node-sass’
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:562:25)
[ng] at Module.require (internal/modules/cjs/loader.js:690:17)
[ng] at require (internal/modules/cjs/helpers.js:25:18)
[ng] at Object.sassLoader (/Users/chris/sonic/node_modules/sass-loader/lib/loader.js:46:72)
[ng] chunk {common} common.js, common.js.map (common) 14.1 kB [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {main} main.js, main.js.map (main) 23.8 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.9 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 22 kB [initial] [rendered]
[ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1-tab1-module) 6.38 kB [rendered]
[ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2-tab2-module) 4.6 kB [rendered]
[ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3-tab3-module) 4.6 kB [rendered]
[ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 7.63 kB [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.44 MB [initial] [rendered]
[ng] 
｢wdm｣: Failed to compile.
hi, i cant seem to be able to set a default height for ion-textarea.
passed values this way from page A
async popupSchedule(schedule){
const modal = await this.modalCtrl.create({
component: EditSchedulePage,
componentProps: {
‘title’:schedule.data().title,
‘description’: schedule.data().description,
‘date’: schedule.data().date,
}
});
return await modal.present();
}
and on another page i received input like this
@Input() title : string;
@Input() descrption : string;
@Input() date : string;
and in html
the concern is on the textarea…i expected it would expand based on the length of texts in it.
how can i make that possible?
I followed this tutorial step by step https://ionicthemes.com/tutorials/about/ionic-facebook-login
The issue I’m having is that after the login, my app is not redirecting to the page I need it to. No error on the console when testing this on an emulated Pixel 2 device running Android 9 . Here’s the code for handling the authentication:
const permissions = ['public_profile', 'email'];
await this.facebook.login(permissions).then(response => {
const userId = response.authResponse.userID;
this.uid = userId;
this.facebook.api('/me?fields=name,email', permissions)
.then(user => {
user.picture = 'https://graph.facebook.com/' + userId + '/picture?type=large';
const email = user.email;
this.dataService.getUser(this.uid).subscribe((data) => {
if (data.data() !== undefined) {
this.user = data.data();
this.deviceStorage.set('user', JSON.stringify(data.data()));
this.deviceStorage.set('uid', this.uid);
this.dataService.userNewListener(this.uid);
if (data.data().isNew) {
this.zone.run(() => {
this.router.navigate(['/profile']);
});
this.toastService.showToast('Please set up your profile first.');
} else {
this.zone.run(() => {
this.router.navigate(['/home']);
});
this.toastService.showToast('User has signed in successfully.');
}
} else {
this.dataService.addUser(this.uid, {email, uid: this.uid, isNew: true, isFb: true}).then(() => {
const obj = {email, uid: this.uid, isNew: true, isFb: true};
this.deviceStorage.set('uid', this.uid);
this.deviceStorage.set('user', JSON.stringify(obj));
this.toastService.showToast('Please set up your profile first.');
this.zone.run(() => {
this.router.navigate(['/profile']);
});
}).catch((err) => { console.log('facebookNerror 3 :' + err); });
}
});
}).catch((err) => { console.log('facebookNerror 2 :' + err); });
}, error => {
console.log(error);
}).catch((err) => {
console.log('facebookNerror 1 :' + err);
this.toastService.showToast('Native facebook error:');
this.toastService.showToast('Native facebook error:' + err);
});
There is no error when you type ionic serve or ionic lab at the command prompt.
I’ve solved it using this
.label-float {
position: relative;
padding-top: 13px;
&.invalid {
label {
color: #f53d3d !important;
}
input {
border: 2px solid #f53d3d !important;
}
}
input {
background-color: transparent;
border: 2px solid #fff;
border-radius: 5px;
outline: none;
min-width: 250px;
padding: 15px 20px;
font-size: 16px;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-webkit-appearance: none;
&:focus {
border: 2px solid #3951b2;
}
&::placeholder {
color: transparent;
}
}
label {
color: #fff;
pointer-events: none;
position: absolute;
top: calc(50% - 8px);
left: 20px;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
background-color: #3880ff;
padding-top: 5px;
margin-left: 10px;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
}
.label-float input:focus + label,
input:not(:placeholder-shown):not(.invalid) + label {
font-size: 13px;
top: 0;
color: #3951b2;
}
.label-float input:not(:focus):not(:placeholder-shown):not(.invalid) + label {
font-size: 13px;
top: 0;
color: #fff;
}
<div class="label-float" [class.invalid]="showErrors('email')">
<input type="text" formControlName="email" placeholder=" " />
<label>E-Mail</label>
</div>
I am also having v3 to v4 migration speed issues tied to ion-slide!
Ionic team - Why is there a performance decrease from v3 to v4, and how can we fix it?
Help!!
This error message is caused by including something that should be imported in declarations rather than imports in your app.module.ts.
So yep, the problem is caused by not correctly importing something.
Just thought I’d comment here in case someone else comes here from google. Wouldn’t want them incorrectly believing this doesn’t have anything to do with imports.
If I have an ion-range implemented like the example on the documentation
<ion-item>
<ion-range min="-200" max="200" color="secondary">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</ion-range>
</ion-item>
How can I acess the current value on the range?
I have also been struggling with the topic of basic navigation in ionic React. I have not found any two examples alike. Is there any updated ‘best practice’ available, especially for tabs?
It went away after removing both iOS and Android platforms and reinstalling. Try it and see if it works. Good luck.
Still needing help on this! Anyone???
