@dipankar123 wrote:
Hi Guys,
I have some problem here
I want to create right side and left side sliding menu together which is possible by ionic 3
but feature not working on ionic 4
kindly help how to do that(left and right side sliding menu together)
Posts: 1
Participants: 1
@Padungthon wrote:
Ionic 4 run device error
command : ionic cordova run android --device
error show:
Checking Java JDK and Android SDK versionsANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=/Users/adisakpadungthon/Library/Android/sdk (DEPRECATED)
Requirements check failed for JDK 8 (‘1.8.*’)! Detected version: 10.0.1
Check your ANDROID_SDK_ROOT / JAVA_HOME / PATH environment variables.
[ ERROR ] An error occurred while running subprocess cordova .
How to solve problem, please help me!
Posts: 1
Participants: 1
@mkone wrote:
I am new to this forum. I hope to get a resolution to the below issue i am facing after installing capacitor. It seems like this issue has multiple flavors and kind of related to circular dependencies. But i could not see where the circular dependency is happening in my code. Therefore I am posting the log here and hoping that someone might see a hint.
Class extends value undefined is not a constructor or null
[ng] TypeError: Class extends value undefined is not a constructor or null
[ng] at Object. (D:\projects\myproject\node_modules@ionic\angular-toolkit\builders\cordova-serve\index.js:30:52)
[ng] at Module._compile (internal/modules/cjs/loader.js:689:30)
[ng] at Object.Module._extensions…js (internal/modules/cjs/loader.js:700:10)
[ng] at Module.load (internal/modules/cjs/loader.js:599:32)
[ng] at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:530:3)
[ng] at Module.require (internal/modules/cjs/loader.js:637:17)
[ng] at require (internal/modules/cjs/helpers.js:22:18)
[ng] at Architect.getBuilder (D:\projects\myproject\node_modules@angular-devkit\architect\src\architect.js:189:35)
[ng] at MapSubscriber.getBuilderDescription.pipe.operators_1.map [as project] (D:\projects\myproject\node_modules@angular-devkit\architect\src\architect.js:121:332)
[ng] at MapSubscriber._next (D:\projects\myproject\node_modules\rxjs\internal\operators\map.js:49:35)
[ng] at MapSubscriber.Subscriber.next (D:\projects\myproject\node_modules\rxjs\internal\Subscriber.js:67:18)
[ng] at TapSubscriber._next (D:\projects\myproject\node_modules\rxjs\internal\operators\tap.js:65:26)
[ng] at TapSubscriber.Subscriber.next (D:\projects\myproject\node_modules\rxjs\internal\Subscriber.js:67:18)
[ng] at MergeMapSubscriber.notifyNext (D:\projects\myproject\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
[ng] at InnerSubscriber._next (D:\projects\myproject\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
Posts: 1
Participants: 1
@m1dev wrote:
How can I pass a variable to the previous component on click of the back button?
Posts: 1
Participants: 1
@Paciorek wrote:
Hi,
In Ionic Studio version 0.0.63 I cannot edit and save files in project.
I tried to write something and save, but studio clear my text and cursor back to the top of file
Posts: 1
Participants: 1
@luciendub wrote:
I’m using Ionic 4 and Cordova 9 and I would like to run the app on my device.
I got an error when using the run command:Command
ionic cordova run android --deviceError (DEVICEID - My Device ID)
Error: Command failed: P:\Simplifiedpath\platform-tools/adb -s DEVICEID shell getpropWhen using –verbose, I get those details:
ionic:lib:shell Error in subprocess stdout pipe: Error [ERR_STREAM_WRITE_AFTER_END]: write after end at writeAfterEnd (_stream_writable.js:248:12) at Object.Writable.write (_stream_writable.js:296:5) at Readable.write (C:\Simplifiedpath\npm\node_modules\ionic\node_modules\stream-combiner2\node_modules\readable-stream\lib\_stream_readable.js:85What’s the point about this error ?
Posts: 1
Participants: 1
@pdj wrote:
I have to show month, day, hour,minute…
but to show it on one page could make people confused…
so I think I should label each one displaying this one is month, and that one is day…etc…
is it possible to place those label on top of each one?
Posts: 1
Participants: 1
@Gaudio83 wrote:
Good evening,
I have created some custom components in my Ionic 4 app and now I would like to publish them on a private NPM to share them for other Mobile apps and Web apps so I can reuse them.
Is there a way to publish only my “components” folder to NPM?
I also took a look to Stencil but I see that I need to create components in vanilla Javascript, instead to use Ionic 4.
Thanks in advance for your help and for your suggestions!
Regards,
Andrea
Posts: 1
Participants: 1
@pdj wrote:
<ion-datetime style="display:none" #datePicker4 (ionChange)="timeselect2()" displayFormat="M/D a:hh:mm" pickerFormat="M/D a:hh:mm" [(ngModel)]="deathdate"> </ion-datetime>
when I clicked it , it shows Month date, hour,minutes well
but the problem is that when I set specific date,
it comes to timeselect2 function which log deathdate.
but deathdate value only show hour and month…why is it?
Posts: 1
Participants: 1
@mhoxha wrote:
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
Posts: 1
Participants: 1
@RyanJackson wrote:
Hey guys
I am builiding a app right now, which should work on android, ios and on the browser. I want to make it possible that the user can upload images into the app, which works perfectly fine on Android and IOS with the Ionic Image Picker PlugIn. The problem right now is to upload images from the browser because I need access to the FileSystem of the desktop. The Image Picker Plugin doesn’t work with the browser.
I tried this in the HTML File:
ng-container *ngIf="this.isDesktop === true"> <input style="display: none" type="file" (change)="getImagesDesktop($event)" #fileInput> <ion-button (click)="fileInput.click()">FileSystem</ion-button> </ng-container>And in TypeScript this:
public getImagesDesktop(event) { this.imageResponse = []; this.selectedFile = event.target.files[0]; this.imageResponse.push('data:image/jpeg;base64,' + this.selectedFile); console.log(this.imageResponse); }But that doesn’t seem to work, because I need the image coded in base64.
Posts: 1
Participants: 1
@OSentrk wrote:
I am working on a geolocation, google maps project. I wrote a simple API and uploaded my server. I can reach my api’s data with;
export class Tab2Page implements OnInit, AfterContentInit { getLat: any; getLong: any; constructor(private geolocation: Geolocation, public http: HttpClient) { this.http.get("apilink").subscribe(data => { this.getLat = data["lat"]; this.getLong = data["long"]; }); console.log(this.getLat); //gives undefined } }But when i want to reach getLat and getLong variable from any function - or outside this.http.get()- that variables give undefined. What should i do? I tried static, const, global, var declare etc.
ngAfterContentInit(): void { console.log(this.getLat); //gives undefined }Some topics said that it depends on async problem. But i cannot fix this problem.
Posts: 1
Participants: 1
@adilson081 wrote:
/MY VIEW/
<ion-content [scrollX]="true" [scrollEvents]="true" (ionScrollStart)="ionScrollStart()"> <ion-row *ngFor="let i of items"> <ion-list *ngFor="let t of time" class="time"> <ion-col> </ion-col> </ion-list> </ion-row> <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>
Posts: 1
Participants: 1
@marcospascoski wrote:
Ola Tudo bem
tenho um projeto em Ionic 4 que utiliza as rotas com essas configurações (“new”, “:id/edit”)
const routes: Routes = [
{ path: ‘’, component: ProductGroupListComponent },
{ path: ‘new’, component: ProductGroupFormComponent },
{ path: ‘:id/edit’, component: ProductGroupFormComponent }];
como posso fazer um modal para adicionar e editar com um formulário que utiliza (formControlName do angular 7). Lembrando que consigo abrir o modal com o formulário. Mas como configurar passar ou obter essas rotas no modal.
Quando clicou no botão editar abri o modal e com o formulário com os campos preenchido (selecionado) do grupo de produtos que possui um id e description.Alguém pode me ajudar?
Posts: 1
Participants: 1
@oliviercharvoz wrote:
Hi!
I am trying to make a Docker image for my Ionic v4 projects. It is working just fine except the livereload.
Here is the content of my Dockerfile:
FROM node:10.16.0-alpine WORKDIR /usr/src/app #ENVIRONNEMENT ENV GLIB_PACKAGE_BASE_URL="https://github.com/sgerrand/alpine-pkg-glibc/releases/download" \ GLIB_VERSION="2.29-r0" \ JAVA_HOME="/usr/lib/jvm/java-1.8-openjdk" \ GRADLE_HOME="/usr/local/gradle" \ GRADLE_VERSION="5.4.1" \ ANDROID_HOME="/usr/local/android-sdk-linux" \ ANDROID_TOOLS_VERSION="r25.2.5" \ ANDROID_API_LEVELS="android-22" \ ANDROID_BUILD_TOOLS_VERSION="29.0.2" \ PATH="${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH" # INSTALL JAVA RUN apk update && \ apk add curl openjdk8-jre openjdk8 # INSTALL IONIC AND CORDOVA RUN npm install -g cordova ionic # INSTALL GRADDLE RUN mkdir -p ${GRADLE_HOME} && \ curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \ unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \ mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \ rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/ # INSTALL ANDROID RUN mkdir -p ${ANDROID_HOME} && \ curl --tlsv1 -L https://dl.google.com/android/repository/tools_${ANDROID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \ unzip /tmp/tools.zip -d ${ANDROID_HOME} # INSTALL GLIBC RUN curl -L https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \ curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \ curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \ apk add /tmp/glibc-bin.apk /tmp/glibc.apk # CONFIGURATION RUN echo y | ${ANDROID_HOME}/tools/android --verbose update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION} # TEMP FILES DELETION RUN rm -rf /tmp/* /var/cache/apk/* # PORTS EXPOSE 8100 8200Here is the content of my docker-compose.yml:
version: '3' services: ionic: build: ./docker/ionic volumes: - ./app:/usr/src/app ports: - "8100:8100" - "8200:8200" entrypoint: /bin/sh stdin_open: true tty: trueHere is the command I use in the container:
ionic serve --no-open --address 0.0.0.0And here is what ionic info returns:
Ionic: Ionic CLI : 5.0.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.4.2 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1 Utility: cordova-res : not installed native-run : not installed System: NodeJS : v10.16.0 (/usr/local/bin/node) npm : 6.9.0 OS : Linux 4.9The host OS is Windows 10.
I tried a lot of things including:
- checking that the path of my project does not contain any space
- adding --poll=2000 in the ionic serve
- editing /proc/sys/fs/inotify/max_user_watches which already contains the following value: 524288
Does anyone have an idea?
Posts: 1
Participants: 1
@BrentAshWilliams wrote:
Hello,
I am in the process of porting my ionic 3 app to ionic 4.
I have the following ion-button:
<ion-button ion-button fill="clear" expand="block">UTILITIES</ion-button>I was hoping to make the fill=“clear” property dynamic on a variable.
What is the best way to do this?
Thanks,
Brent
Posts: 6
Participants: 3
@codiqa100078139 wrote:
I am working on an IONIC 3 application.
In this app the user will be able to get photos from his google photos account and do some design manipulations on the image he selected.So for that I want to use the google photos API
I did not find any example on how to accomplish this in IONIC.
I tried to do it like this:
Login to google with:
cordova-plugin-googleplus
And request thehttps://www.googleapis.com/auth/photoslibraryscopeHere is the code:
//Here we do a login. this.gplus.login({ 'webClientId': '***********', 'offline': true, 'scopes': 'profile email https://www.googleapis.com/auth/photoslibrary' }).then((res) => { //after login we try to get the google photos albums this.http.get('https://photoslibrary.googleapis.com/v1/albums', { responseType: ResponseContentType.Json, params:{ accessToken: res.accessToken, pageSize: 50, } }).subscribe(res=>{ console.log('<--- google images res: ', res); },err=>{ console.log('<--- google images err: ', err); }); });Now I get an error ‘Expected OAuth 2 access token’
Here is the full error description:Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.So now the question is how do is get an OAuth 2 access token ?
Posts: 1
Participants: 1
@pimol wrote:
My app (Ionic 4) receive notification through onesignal native plugin. I used onesignal online desk to test the app, and the onesignal API with postman to send notification via api. All ok.
Then I made a simple utility to send the notifications, using HTTP (cordova-plugin-advanced-http 2.0.9 "Advanced HTTP plugin").I can send a notification with POSTMAN with body:
{“app_id”: “id_omitted”,
“contents”: {“en”: “English Message”},
“included_segments”: [“Subscribed Users”]}w/o any problem about header and auth but every time I got from the onesignal API server (that run correcly with Postman) the errorcode 400 with description:
{“errors”:[“contents must be key/value collections by language code”]}
This is my code (run() is a function called by a click of a button, url and headers are defined as constant):
constructor(private http: HTTP) { this.body = { "app_id": "cut cut cut cut cut", "contents": { "en": "English Message" }, "included_segments": ["Subscribed sers"] } } run() { console.log("*************************************") console.log("payload: ", this.body) console.log("*************************************") this.http.post(this.url, this.body, this.header).then(data => { console.log(data.status); console.log(data.data); console.log(data.headers); }).catch(error => { console.log(error.status); console.log(error.error); console.log(error.headers); }) }if I “stringify” body, the result is:
{“app_id”: “omittedByMe”, “contents”: {“en”: “English Message”},“included_segments”: [“Subscribed Users”]}
exactly the same of the postman body… why contents is not accepted?
Any help will be useful
P.
Posts: 1
Participants: 1
@JohnCressman wrote:
I’ve imported ng2-pdf-viewer and set it up as per the example, but I get the “ERROR Error: Uncaught (in promise): Error: Template parse errors:” error.
I’ve tried moving the import to the home.ts, but that didn’t work either. I really need to figure this out.
app.module.ts
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 { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { PdfViewerModule } from 'ng2-pdf-viewer'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, PdfViewerModule], providers: [ StatusBar, SplashScreen, PdfViewerModule, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}home.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], providers: [ ] }) export class HomePage { public pdf; constructor() { this.pdf = 'http://www.axmag.com/download/pdfurl-guide.pdf'; } }home.html
<ion-header> <ion-toolbar> <ion-title> NG2-PDF-VIEWER </ion-title> </ion-toolbar> </ion-header> <ion-content> <pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer> </ion-content>full error
ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'src' since it isn't a known property of 'pdf-viewer'. 1. If 'pdf-viewer' is an Angular component and it has 'src' input, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-content> <pdf-viewer [ERROR ->]src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer> </ion-content> "): ng:///HomePageModule/HomePage.html@9:14 'pdf-viewer' is not a known element: 1. If 'pdf-viewer' is an Angular component, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <ion-content> [ERROR ->]<pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer> </ion-content> "): ng:///HomePageModule/HomePage.html@9:2 Error: Template parse errors: Can't bind to 'src' since it isn't a known property of 'pdf-viewer'. 1. If 'pdf-viewer' is an Angular component and it has 'src' input, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-content> <pdf-viewer [ERROR ->]src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer> </ion-content> "): ng:///HomePageModule/HomePage.html@9:14 'pdf-viewer' is not a known element: 1. If 'pdf-viewer' is an Angular component, then verify that it is part of this module. 2. If 'pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <ion-content> [ERROR ->]<pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer> </ion-content> "): ng:///HomePageModule/HomePage.html@9:2 at syntaxError (compiler.js:2430) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158) at compiler.js:26101 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101) at compiler.js:26011 at Object.then (compiler.js:2421) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17290) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601)There’s not that much to it, I’m not sure how I’m screwing it up.
Posts: 1
Participants: 1
@kunaldahale wrote:
This issue is for both platform ios and android.
Cordova : 7.1.0
npm: 6.4.1
node : v8.12.0my package.json :
{
“name”: “MyRetailShop”,
“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”: “^8.0.0”,
“@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/core”: “~4.20.0”,
“@ionic-native/geofence”: “^4.20.0”,
“@ionic-native/open-native-settings”: “^4.20.0”,
“@ionic-native/splash-screen”: “~4.20.0”,
“@ionic-native/status-bar”: “~4.20.0”,
“@ionic/pro”: “2.0.4”,
“@ionic/storage”: “2.2.0”,
“cordova-android”: “^8.0.0”,
“cordova-ios”: “4.5.5”,
“cordova-open-native-settings”: “^1.5.2”,
“cordova-plugin-add-swift-support”: “1.7.2”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-geofence”: “git+https://github.com/cowbell/cordova-plugin-geofence.git”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^4.0.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“es6-promise-plugin”: “^4.2.2”,
“ionic-angular”: “3.9.5”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.11”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.29”
},
“devDependencies”: {
“@ionic/app-scripts”: “^3.2.3”,
“typescript”: “~2.6.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova-open-native-settings”: {},
“cordova-plugin-add-swift-support”: {},
“cordova-plugin-geofence”: {
“GEOFENCE_ALWAYS_USAGE_DESCRIPTION”: “{EXECUTABLE_NAME} Would Like to Use Your Current Location Even In Background.", "GEOFENCE_IN_USE_USAGE_DESCRIPTION": "{EXECUTABLE_NAME} Would Like to Use Your Current Location When In Use.”
}
},
“platforms”: [
“ios”,
“android”
]
}
}As you can see below there are no any error :
Posts: 1
Participants: 1
