@tux wrote:

Hello! Earlier have work with Angular with frontend project and know that components should be declared in the module.
But declaration in Ionic 4/Angular 4.8 doesn’t solve the problem:

Error: Component ImagesListComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component ImagesListComponent is not part of any NgModule or the module has not been imported into your module.

app.module.ts

@NgModule({
  declarations: [AppComponent, ImagesListComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

images-list.component.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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImagesListComponent } from './images-list/images-list-component.component';

@Component({
  selector: 'app-images-list',
  templateUrl: './images-list.component.html',
  styleUrls: ['./images-list.component.scss'],
})
export class ImagesListComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import {ImagesListComponent} from '../images-list/images-list.component';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'catalog',
        children: [
          {
            path: '',
            component: ImagesListComponent
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/catalog',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Please, give me an example based on tabs project.

Thanks!

Posts: 1

Participants: 1

Read full topic

@roy800227 wrote:

I want to migrate a project from ionic1 to ionic3, but cordova-plugin-ble-central has some problems

ionic1

   function quickScan( ) {
			var q = $ble.scan([], 3);
			q.then(function() {
				/* Done scanning */
				console.log("quickScan, numScans=" +sys.numScans);
				if (!sys.fsm.is("LISTING")) {
					setNumScans(0);
					return;
				}

				if (sys.numScans > 0)
					setNumScans(sys.numScans - 1);

				if (sys.numScans > 0) {
					quickScan();
				} else {
					console.log("BLE done scanning");
					if (sys.fsm.is("LISTING")) {
						sys.fsm.abort();
						sys.listOkCb(null);
					}
				}
			}, function(err) {
				/* Scanning Error */
				console.log("BLE ERR scanning");
				sys.fsm.abort();
				sys.listErrCb(err);
			}, function(dev) {
				/* New device found */
				addAndReportDevice(dev);
			});
		}

ionic3

  quickScan( ) {
			let q = this.Ble.scan([], 3)
			q.toPromise().then(function() {
				/* Done scanning */
				console.log("quickScan, numScans=" +this.numScans);
				if (!this.fsm.is("LISTING")) {
					this.setNumScans(0);
					return;
				}

				if (this.numScans > 0)
					this.setNumScans(this.numScans - 1);

				if (this.numScans > 0) {
					this.quickScan();
				} else {
					console.log("BLE done scanning");
					if (this.fsm.is("LISTING")) {
						this.fsm.abort();
						this.listOkCb(null);
					}
				}
			}, function(err) {
				/* Scanning Error */
				console.log("BLE ERR scanning");
				this.fsm.abort();
				this.listErrCb(err);
					/* New device found */
				this.addAndReportDevice(this.dev);
			});
		}

error message:TypeError: Cannot read property ‘scan’ of undefined

Please tell me how to solve it

Posts: 1

Participants: 1

Read full topic

@akshay1000 wrote:

I have been learning about Ionic by implementing a side-menu in my demo application. I have pretty much followed all the steps, but fail to render the side-menu as the toggle menu buttons seem to be missing. Below is the required code required for analysis if required.

Source Code for Menu Items :
menu.module.ts :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { MenuPage } from './menu.page';

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'first',
        loadChildren: '../first/first.module#FirstPageModule'
      },
      {
        path: 'second',
        loadChildren: '../second/second.module#SecondPageModule'
      }
     
    ]
  },
  {
    path: '',
    redirectTo: '/menu/first'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

Source code for menu.page.ts :

import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {

  pages :[
    {
      title:'First',
      url:'/menu/first'
    },
    {
      title:'Second',
      url:'/menu/second'
    }
   
  ];

  selectedPath = '';

  constructor(private router : Router ) {
    this.router.events.subscribe((event : RouterEvent) => {
      this.selectedPath = event.url;
    })
   }

  ngOnInit() {
  }

}

Source Code for app-routing.module.ts :

import { NgModule } from '@angular/core';
import {RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', 
    loadChildren: './pages/menu/menu.module#MenuPageModule' 
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Source code for menu.page.html :

<ion-split-pane>
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
            <ion-label>
              {{ p.title }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

I get the output as a blank menu when ionic serve is used. Please help me with this blocker as soon as possible. Let me know in case any additional code or info is needed

Posts: 1

Participants: 1

Read full topic

@lucaceck95 wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@Amolinari wrote:

evety time I start an ionic command from shell in macosx (catalina), eg.
ionic serve

when I try to stop it with control+c, cpu load increases a lot, cpu fans spins too
I searched on processes, I found that there’s a very high number of processes with “pgrep” command, it seems threre’s an infinite loop that (I suppose) is searching for ionic process PID or something like that…

the only “workround” I’ve found is to manually kill ionic process, considering that’s the parent process, all the pgrep’s ones are dropped

anyone else w/ this strange issue?
suggestions?

thank you
Antonio

Posts: 1

Participants: 1

Read full topic

@ioclaudio wrote:

Hi,
I have to update the system payment of an Ionic4 app using 3DS.
Do you know if there is a library or a plugin to do this?

Reading the protocol specifications it seems that there is a phase of the authorization procedure that happens outside the app on the card issuer site.
Here the user provides some credentials and the card emitter site redirects to the merchant site with the result of the transaction,

How this can be implemented?
Should I use the InAppBrowser plugin to redirect the user to the emitter site?
And how can I manage, with my App, the redirection to the merchant site done by the emitter site?

It seems simple to implement this behavior with a web site but not with a mobile App.

Thank you very much.

cld

Posts: 1

Participants: 1

Read full topic

@contrasto97 wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@theHamster wrote:

Hi,

I’m using an Ionic 3 app, trying to get social sharing working.

I followed the steps to install the Ionic Native Social Sharing plugin from: https://ionicframework.com/docs/v3/native/social-sharing/

Ran:

$ ionic cordova plugin add cordova-plugin-x-socialsharing
$ npm install --save @ionic-native/social-sharing@4

Imported the plugin (version 4.x.x) via my app module and added SocialSharing to the providers array.

Imported the plugin via my app.component using:

import { SocialSharing } from '@ionic-native/social-sharing';

Added to the constructor:

private socialSharing: SocialSharing

This share function, also in app.component is triggered via a button in the html (side menu):

async share() {
    try {
      // Pop the native social sharing sheet, allowing the user to choose how to share the app.
      await this.socialSharing.share(this.shareMessage, this.shareSubject, this.shareFile, this.getShareUrl());
      this.toast.show('Thanks for sharing!', 3000);
    }
    catch(err) {
      console.error(err);
      alert(err);
    }
  }

I’m using platforms: ios, android and browser.

When I call the method from a build on a real device I get the error:

"Plugin is not installed"

Tried:

1. Checking logs for installation errors. None seen.
2. Reinstalled plugin.
3. Checked plugin present using $ionic cordova plugin list. cordova-plugin-x-socialsharing 5.4.7 “SocialSharing” is present.
4. Removed and added all platforms again.
5. Wrapped the share method inside a platform.ready().

Nothing seems to be working. I cannot get the app to recognise the plugin is installed!

PLEASE HELP! What can I try next?

Thanks

Posts: 1

Participants: 1

Read full topic

@zwacky wrote:

Hey all
I was working on the mobile version of an Ionic app and realized that when I used <ion-tabs slot="top"> the tab is appearing above the <ion-header>. Shouldn’t it be the under the <ion-header> or am I missing something?

I was checking out the starter tabs project, too and got the same result (see screenshot). Does somebody has some insight? Cheers!

Posts: 1

Participants: 1

Read full topic

@leonardofmed wrote:

Context
I’m trying to receive an image file from my external storage as base64, to do this I’m using the function readAsDataURL(), that comes with the Ionic File plugin, which is based in File API. I don’t know what I’m doing wrong, because I can see the base64 string from the log inside the function, but I can’t return this string correctly, instead I’m getting what I suppose to be a Promise object (ZoneAwarePromise)

---

My Function

...    
this.uriToBase64(arrayItem2.filePath).then((imageAsBase64) => {
    console.log("image as base64: ", imageAsBase64); // Receiving the  ZoneAwarePromise here
});
...

async uriToBase64(uri) {
    let nameFile = uri.replace(this.file.dataDirectory, '');

    await this.file.readAsDataURL(this.file.dataDirectory, nameFile).then((file64) => {
        let fileWithoutExtension = ('' + file64 + '').replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
        console.log("File without extension: ", fileWithoutExtension); // Receiving the base 64 correctly here
        return fileWithoutExtension;
    })
    .catch(err => {
        console.log("Error while transforming image to base64: ", err);
    });     
}

---

Details

I think the way I’m using the function is correct, we can see the same usage here.

I found some related questions, but they don’t helped me much:
Problem with Ionic Capacitor, pretty similar to my problem
Ionic storage problem, returning ZoneAwarePromise too
StackOverflow similar question

Posts: 1

Participants: 1

Read full topic

@clopio wrote:

J’ai 3 applications ionic3 sur android utilisant le plugin googlemaps qui fonctionnaient très bien. Il y a 2 jours, sans avoir fait aucune modification, sur chacune d’elle, je n’ai plus d’affichage de la carte ! Sur Browser, l’affichage est correct. Que s’est-il passé?

I have 3 ionic3 applications on android using the googlemaps plugin that worked very well. There are 2 days, without any modification, on each of them, I no longer have a map display! On Browser, the display is correct. What happened?

Posts: 1

Participants: 1

Read full topic

@aditbharadwaj wrote:

Iam using Ngx Translation to translate my app from EN to HI (hindi) everything works gr8 but when i close the app and restart it the app is translated back to English. Is their any way i can keep my changed language setting or any way to keep it stored as per the setting chose by the current user logged in?

My current code below:
Settings.html

<ion-item>
                    <ion-label>Change Language</ion-label>
                    <ion-select [(ngModel)]="language" (ionChange)="changeLanguage()" name="language" placeholder="Select Language">
                       <ion-option value="en" selected="true">English</ion-option>
                       <ion-option value="hi">Hindi</ion-option>
                    </ion-select>
                </ion-item>

settings.ts

changeLanguage()
{
   
   this.translateService.use(this.language);
}

Posts: 1

Participants: 1

Read full topic

@vespinasgmailcom wrote:

I have this android app built from an Ionic4 project. This app uses the normal http client to send requests to a local REST server. I deployed the app to my personal test device (a generic 7" Android 8 tablet) and the app works as expected.

I then installed in a Huawei 12" tablet, Android 9, and the app also works as expected. But then I installed the app in the customer’s device, a 8" Galaxy Tab 2 running Android 9, and the app runs but any request sent to the REST server fails with an “Uknown error” status code 0. If I try to acces the REST server from the device’s browser, it works ok. I even downloaded and installed a REST client and it also worked without problems with the REST server… the problem only happens with my app and on this device.

Any ideas of what to check? I discarded permissions problems already ,since my app has all required permissions.

Victor

Posts: 1

Participants: 1

Read full topic

@media4learning wrote:

Hey all. Simple question, I am using Ionic 4. When I run ionic serve it launches in Google Chrome. I want to change this so it launches in Google Chrome Canary. I want to do this in package.json, like I could in Ionic 3 so I don’t have to type --browser etc.

How do I do this in Ionic 4???

I have this:

scripts": {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
}

Posts: 1

Participants: 1

Read full topic

@harryvs wrote:

Hello i want to read m3u8 file in ionics. Actually i want to build a offline video app so in my site the video will be use as m3u8 so i want to download this m3u8 video in app just because i want to read the file so is there any possibility to read the m3u8 file.

Posts: 1

Participants: 1

Read full topic

@justin49 wrote:

Hello Team,

I do have an experience with mobile application development using ionic, Xamarin and Angular.

Work Samples:

https://play.google.com/store/apps/details?id=com.pitchero.pitchero&hl=en

And many more……(NDA has been signed that’s why didn’t share those links with you now)

Skype Me: https://join.skype.com/invite/a800V6qAB5dZ

Look forward to hearing from you soon.

Regards,

Justin C

Posts: 1

Participants: 1

Read full topic

@uldcra wrote:

I have a problem, i have create one side menu wifth ion-menu contentId=“content”, it´s doesnt show in IOS devices, but i solve create a new project with ionic sidebar, but i have another project i need create two sidebars because, I need the second sidebar for filter options,

Are there any solution for use this option with ion-menu with , normal ion-menu?

My version Ioninc 5.x

Sorry my english isn´t very poor.

Posts: 1

Participants: 1

Read full topic

@wmjoers wrote:

Hi all!

I’m creating an Ionic 4 app and use the NavController (from ‘@ionic/angular’) to navigate to and from pages.

Is there a way to find out how many pages there are in the navigation stack?

I found some docs about how to do this in Ionic3 but the API has clearly changed since then.

Best Regards
/John

Posts: 1

Participants: 1

Read full topic

@leonardofmed wrote:

I have the following algorithm:

// Main Function
	// Get some local data
	// Convert to some format I need to edit
	// Loop through user's local images
		// Edit the converted data to add the image's names to it
		// Convert IMAGE to base64 and add result into zip file
		that.uriToBase64(imageFilePath).then((result) => {
			console.log("image as base64: ", result);
			zip.file(arrayItem2.name, result, {base64: true});
		});

	// Convert data again to save it
	// Add data to zip file
	// Generate zip file and save it in user's local storage

//uriToBase64() function

My problem is:

The step ‘Add data to zip file’ happens before the images are added to zip file. Although the ‘Convert IMAGE to base64’ step has a .then, everything inside happens only after everything is finished. In this case, my zip file is being saved without the images. I tried to make this step work synchronously, using async/await syntax in countless ways, but I couldn’t make it work the way I expected, which is adding the image data inside the zip file within each iteration.

Since the result of uriToBase64() function is a Promise, using .then to get the result data should “pause” the loop until the data is added by the zip.file() command, then iterate with the next image, right? If not, what is the correct way to wait for it, taking into account the current structure of the algorithm?

Posts: 1

Participants: 1

Read full topic

@umsuka wrote:

Hi

I would like assistance with getting city name from gps coords, I am using agm/core.

Here is my code that gets gps lat and long and its working on getting coords, I need to get a city name with the coords returned.

onLocate() {
		const loader = this.loadingCtrl.create({
			content: 'Getting your Location...'
		});
		loader.present();
		this.geolocation
			.getCurrentPosition()
			.then((location) => {
				loader.dismiss();
				this.location.lat = location.coords.latitude;
				this.location.lng = location.coords.longitude;
			})
			.catch((error) => {
				loader.dismiss();
				const toast = this.toastCtrl.create({
					message: 'Could not get location, please pick it manually!',
					duration: 2500
				});
				toast.present();
			});
	}

Posts: 1

Participants: 1

Read full topic