(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
↧
Ionic-popover: what is the proper way to present the popover-conent?
↧
Could not install from "ios" as it does not contain a package.json file
I landed here because I got this error:
ionic cordova platform add android
> cordova platform add android
{ Error: npm: Command failed with exit code 1 Error output:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "android" as it does not contain a package.json file.
and thanks to your comment, I renamed the folder android (that capacitor had added in the root of my project), then ran the command again and it succeeded!
Thank you @jcesarmobile
↧
↧
Inappbrowser popup authentication
@interino86 have you get this solution?
↧
How to set up sourcemaps with Ionic
Hi,
I’m trying to develop a small test project in Ionic and StencilJS and am unable to get sourcemaps to work.
Since I don’t think that this is related specifically to Stencil, I’m posting the question in the general Ionic forum.
To reproduce:
npm init stencil- edit
src/components/app-home/app-home.tsxand add a small greeting (see below) npm start
My modified app-home.tsx looks like this:
//...
export class AppHome {
componentDidLoad(){
console.log('Hello from AppHome');
}
//...
When opening this in Firefox or Chrome, the greeting is console logged. But it points to some processed js code, not the actual typescript source. Here is a screenshot of the output on Chrome, Firefox is basically identical:
The linked source file is bundled Javascript. For this simple example it is still readable, but as the sourcecode grows, it becomes unusable.
After looking at the generated files, the problem seems clear: Sourcemaps are not produced (I checked the compiled files in www/build). Editing tsconfig.json does not help:
{
"compilerOptions": {
"sourceMap": true,
For easier reproduction of the issue, I have created a repo with this exact state, you can find it here: https://github.com/lhk/stenciljs-sourcemap-problem
git clone https://github.com/lhk/stenciljs-sourcemap-problem
cd stenciljs-sourcemap-problem
npm start
How do I set up sourcemaps correctly?
↧
Nested component not updating view from parent parameter
Thank you so much! That did the trick. Appreciate the help.
↧
↧
How to set up sourcemaps with Ionic
Looks like sourcemaps are not yet supported:
Thanks for making this technology. It looks like it has lots of potential. But without sourcemaps I just can’t use it for something serious. Lack of sourcemaps will just be too much of a hit on my productivity 
↧
Adding Google Analytics in Angular/Ionic 4 app
@rbender FYI
cordova-plugin-firebase has since been discontinued. See https://github.com/arnesson/cordova-plugin-firebase/issues/1057
it is recommended to use cordova-plugin-firebasex instead, which is a fork based on this plugin but it’s actually being maintained. https://www.npmjs.com/package/cordova-plugin-firebasex
Hope it helps.
Cheers!
↧
About the @ionic-native/http/ngx
First install
npm install --save @angular/common/http
i have created one function called login() with http
code:
import { HttpClient } from ‘@angular/common/http’;
export class LoginPage implements OnInit {
films : any;
constructor(public httpClient: HttpClient) {
}
login(mobile)
{
this.films = this.httpClient.get(“https://yoururl/foldername/myfile.php?mobile=”+mobile);
this.films.subscribe(data => {
console.log(data);
});
}
}
↧
Ion-select-option unable to give any event
you can use this way…
<ion-select formControlName="shippingMethod (ionChange)=“shippingMethodChange($event)”>
↧
↧
Seems to be a very old project file format - please open your project file in a more recent version of Xcode
fastlane finished with errors relating to automatic_code_signing. I’m not sure what this means and how to fix it, but it’s an error I hadn’t gotten before. I’m on Ionic v3.
↧
Sticky Footer in ion-content = different margin depending on the browser
Hi,
I’m using a sticky footer inside a component (so inside the ion-content)
I have different margin depending on the browser.
On chrome and native ios Android device the padding seems the same.
But on safari/firefox the footer actually go behind the tabs bar.
Here is a demo and a picture.
StackBlitz demo
#footer {
position: fixed;
bottom: 33px;
width: 100%;
justify-content : center;
}
<div id="footer">
<p>Hello</p>
</div>
↧
Ion-searchbar: pass filtered list results to another page
Thanks for all your answers!
I don´t get a solution until now. Could you please take a look at my code an give me a note?
search.service.ts
...
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class searchService {
api = '/items';
private results = new BehaviorSubject([]);
constructor(private http: HttpClient) {
}
// Results
public getResults() {
return this.results.asObservable();
}
public setFilteredItems(name: string) {
this.http.get<any>(`${this.api}/list.json`).subscribe(response => this.results.next(response));
}
}
filter.page.ts
setFilteredItems(searchTerm) {
this.searchService.getTitlesForSearch(searchTerm).subscribe(items => {
this.itemTitle$ = items;
});
}
filter.page.html
<ion-card>
<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="setFilteredItems (searchTerm)"></ion-searchbar>
</ion-card>
<ion-button (click)="openResults()">
Results: {{ itemTitle$.length }}
</ion-button>
resultslist.page.ts
...
import { SearchService } from '../../search.service';
...
export class ResultslistPage implements OnInit {
public results = null;
private resultList: any;
constructor(
private searchService: SearchService,
private router: Router) {
searchService.getResults().subscribe(this.resultList: any[] => {
this.results = resultList;
});
}
}
The last part (searchService.getResults().subscribe …) is buggy, any idea how to fix it and get only a filtered result list in the resultslist.page.html ?
↧
How to size a modal by ts file ionic 4
I would like to size a modal from the TS File and not by the Global SCSS File.
There is a simple code where you size the modal by the Global SCSS File.
HTML File
<ion-content>
<ion-button expand="block" fill="outline" (click)="onModal()">
<ion-icon name="apps"></ion-icon>
</ion-button>
</ion-content>
TS File:
export class HomePage {
constructor(private modalController: ModalController) {}
onModal() {
this.dynamicPreview('Dynamic Modal');
}
async dynamicPreview(info: any) {
const myModal = await this.modalController.create({
component: DynamicModalPage,
cssClass: 'dynamicModalCss',
componentProps: {
vInfo: info,
}
});
return await myModal.present();
}
}
Global SCSS File:
.dynamicModalCss {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
contain: strict;
display: flex;
justify-content: center;
align-items: center;
.modal-wrapper {
width: 20rem;
height: 40rem;
}
}
I have no idea about how to do this
Thanks for your suggestions and help
↧
↧
How to size a modal by ts file ionic 4
You send your css as props and render that in the component.
Can I ask why do you want to do it in typescript instead of CSS? also, why are you putting that CSS in the global.scss file instead of the component CSS file?
↧
InAppPurchase2 refund event does not trigger
Hi,
while testing inAppPurchase2 I notice that the refund event is never trigger (this in Android). Did any of you have successfully trigger this event? I asked in github but I got a comment about setting a revoke option that is not documented anywhere and I do not know how to proceed.
Thanks
↧
How to size a modal by ts file ionic 4
Yes you can 
Because I want to change the size of it (width and height) and I can’t know the size before I get information about what I will display.
I hope it makes sense .
A simple example. A picture can have different size, and you don’t know the size of it until you have it.
For your second question. If I don’t put the modal css in the global.scss file I will not be able to give it another size. Just the full screen.
And it’s the only way I know
↧
After running npm update my app will not build
ionic build produces the following error:
ERROR in AppComponent cannot be used as an entry component.
[ERROR] An error occurred while running subprocess ng.
When I ran npm update (prior to getting this error), the following was updated:
C:\Solutions\DTAS-ManifestManager>npm update
npm WARN deprecated @angular/http@7.2.16: Package no longer supported. Use @angular/common instead, see https://angular.io/guide/deprecations#angularhttp
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
core-js@2.6.11 postinstall C:\Solutions\DTAS-ManifestManager\node_modules\core-js
node -e “try{require(’./postinstall’)}catch(e){}”
npm WARN @capacitor/android@1.5.0 requires a peer of @capacitor/core@^1.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})
- @angular/compiler-cli@7.2.16
- @angular/language-service@7.2.16
- @angular/core@7.2.16
- @angular/compiler@7.2.16
- @angular/router@7.2.16
- @angular/platform-browser@7.2.16
- @angular/forms@7.2.16
- @angular/platform-browser-dynamic@7.2.16
- @angular/http@7.2.16
- @angular/common@7.2.16
- @capacitor/android@1.5.0
- @ionic-native/core@5.21.3
- core-js@2.6.11
- @ionic-native/screen-orientation@5.21.3
- @types/jasminewd2@2.0.8
- @ionic-native/status-bar@5.21.3
- karma-coverage-istanbul-reporter@2.0.6
- protractor@5.4.3
- @ionic-native/splash-screen@5.21.3
- rxjs@6.5.4
-
@ionic/angular@4.11.10
added 23 packages from 9 contributors, removed 13 packages, updated 47 packages and audited 54283 packages in 173.088s
I have researched for a solution, but I found none so far. Other than the import statement on the SplashScreen class, nothing as changed in my app.module.ts. Here it is for reference. What could be causing this new problem from an npm update?
// Angular libraries
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;
import { HttpClientModule } from ‘@angular/common/http’;
// Ionic libraries
import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
// Other libraries
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { ScreenOrientation } from ‘@ionic-native/screen-orientation/ngx’;
// Manifest Manager classes and components
import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule
],
providers: [
StatusBar,
SplashScreen,
ScreenOrientation,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
↧
↧
Ion-select-option unable to give any event
<ion-header>
<ion-toolbar>
<ion-title>
Tab Two
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>SELECT SOMETHING</ion-label>
<ion-select multiple="true" [(ngModel)]="day" name="day" required (ionChange)="selectAll($event)" >
<ion-select-option value="selectall" > select all</ion-select-option>
<ion-select-option value="Monday">Monday</ion-select-option>
<ion-select-option value="Tuesday">Tuesday</ion-select-option>
<ion-select-option value="Wednesday">Wednesday</ion-select-option>
<ion-select-option value="Thursday">Thursday </ion-select-option>
<ion-select-option value="Friday">Friday </ion-select-option>
<ion-select-option value="Saturday">Saturday</ion-select-option>
<ion-select-option value="Sunday">Sunday </ion-select-option>
</ion-select>
</ion-item>
{{day}}
</ion-content>
import { Component } from "@angular/core";
@Component({
selector: "app-tab2",
templateUrl: "tab2.page.html",
styleUrls: ["tab2.page.scss"]
})
export class Tab2Page {
ALL_DAYS = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
];
day = [];
constructor() {}
selectAll(_event) {
console.log("in select all", _event);
if (_event.detail.value.includes("selectall")) {
this.day = this.ALL_DAYS;
}
}
}
↧
Change side Menu atributes after login
↧
Sticky Footer in ion-content = different margin depending on the browser
#footer {
position: fixed;
bottom: 10%;
width: 100%;
justify-content : center;
}
try this i am not sure provide css… bottom:10% ; …in percentage
↧