Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 71531 articles
Browse latest View live

Ionic 4 + Capacitor + Firebase

$
0
0

@MarcusA wrote:

When I open Android Studio the sync fails with:

ERROR: Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
Suggestion: add ‘tools:replace=“android:appComponentFactory”’ to element at AndroidManifest.xml:5:5-43:19 to override.

This happens when I add Firebase to the project. The project is Ionic 4 + Capacitor created using the following:

  1. ionic start testApp tabs --capacitor
  2. In my Firebase project I add Android - " Add Firebase to your Android app "
  3. Download google-services.json
  4. Add classpath 'com.google.gms:google-services:4.2.0 to project level build.gradle (already there so ignore this step)
  5. Add implementation ‘com.google.firebase:firebase-core:17.0.0’ to App Level build.gradle
  6. Add apply plugin: ‘com.google.gms.google-services’ to App Level build.gradle
  7. Click the Sync Now button cd myApp
  8. npx cap init testApp com.acmeinc.testApp
  9. ionic build
  10. npx cap add android
  11. npx cap open android

In my Firebase project I add Android - " Add Firebase to your Android app "

  1. Download google-services.json
  2. Add classpath 'com.google.gms:google-services:4.2.0 to project level build.gradle (already there so ignore this step)
  3. Add implementation ‘com.google.firebase:firebase-core:17.0.0’ to App Level build.gradle
  4. Add apply plugin: ‘com.google.gms.google-services’ to App Level build.gradle
  5. Click the Sync Now button

Can anyone help?

Thanks

Marc

Posts: 1

Participants: 1

Read full topic


Cannot read property 'nodeName' of null

$
0
0

@ankitkaushik wrote:

Dear Experts,

Need your help in solving below error. Couldn’t find much information related to this on google.

 ionic:lib:hooks Looking for ionic:build:after npm script. +56s
> cordova build android --verbose
No scripts found for hook "before_build".
No scripts found for hook "before_prepare".
Checking config.xml and package.json for saved platforms that haven't been added to the project
Config.xml and package.json platforms are the same. No pkg.json modification.
Package.json and config.xml platforms are different. Updating config.xml with most current list of platforms.
PlatformApi successfully found for platform android
Checking for saved plugins that haven't been added to the project
Checking for any plugins added to the project that have not been installed in android platform
No differences found between plugins added to project and installed in android platform. Continuing...
Generating platform-specific config.xml from defaults for android at /Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/platforms/android/app/src/main/res/xml/config.xml
Cannot read property 'nodeName' of null
TypeError: Cannot read property 'nodeName' of null
    at Object.parse (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/plist/lib/parse.js:68:25)
    at ConfigFile_load [as load] (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/cordova-common/src/ConfigChanges/ConfigFile.js:86:27)
    at new ConfigFile (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/cordova-common/src/ConfigChanges/ConfigFile.js:53:10)
    at ConfigKeeper_get [as get] (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/cordova-common/src/ConfigChanges/ConfigKeeper.js:51:23)
    at PlatformMunger_apply_file_munge [as apply_file_munge] (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/cordova-common/src/ConfigChanges/ConfigChanges.js:78:50)
    at PlatformMunger.reapply_global_munge (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/node_modules/cordova-common/src/ConfigChanges/ConfigChanges.js:268:14)
    at updateConfigFilesFrom (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/platforms/android/cordova/lib/prepare.js:113:18)
    at Api.module.exports.prepare (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/platforms/android/cordova/lib/prepare.js:44:20)
    at Api.prepare (/Users/ankitkau/WorkDocs/Ankit Kaushik/ionic/mapskool-ionic3/platforms/android/cordova/Api.js:177:45)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/prepare.js:105:36
[ERROR] An error occurred while running subprocess cordova.

        cordova build android --verbose exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 2 functions +0ms
  ionic:utils-process processExit: exiting (exit code: 1) +59ms

Ionic Info:

Ionic:

   Ionic CLI          : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-webview 4.1.1, (and 23 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : not installed

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.0.0 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.1 Build version 10B61

Plugins:

 cordova plugin ls
com-sarriaroman-photoviewer 1.2.4 "PhotoViewer"
cordova-plugin-androidx 1.0.2 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-firebasex 6.0.4 "Google Firebase Plugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-hotspot 1.2.10 "Cordova HotSpot Plugin"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-keyboard 1.2.0 "Keyboard"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.4-dev "StatusBar"
cordova-plugin-streaming-media 2.2.0 "StreamingMedia"
cordova-plugin-telerik-imagepicker 2.3.3 "ImagePicker"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-x-socialsharing 5.4.7 "SocialSharing"
cordova-sqlite-storage 3.2.1 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova.plugins.diagnostic 4.0.12 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Appreciate your help in advance.

Posts: 1

Participants: 1

Read full topic

Google Play Game Services breaks after ionic update

$
0
0

@doug1e wrote:

Hi there,

My project stopped working after upgrading my ionic & cordova. I have been pulling up my hair for the last two days and could not find a way out. I’d be grateful if you could help me out.

To replicate the issue:

  1. Create a blank project by: ionic start AndroidProject blank --cordova
  2. Install the google-play-games-services by:
    ionic cordova plugin add cordova-plugin-play-games-services --variable APP_ID=“XXXX”
    npm install @ionic-native/google-play-games-services
  3. ionic cordova build android --release --prod

The above steps throws the following errors:

Task :app:compileReleaseJavaWithJavac FAILED
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:21: error: cannot find symbol
import android.support.v4.app.FragmentActivity;
^
symbol: class FragmentActivity
location: package android.support.v4.app
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:43: error: cannot find symbol
public abstract class BaseGameActivity extends FragmentActivity implements
^
symbol: class FragmentActivity
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:92: error: incompatible types: BaseGameActivity cannot be converted to Activity
mHelper = new GameHelper(this, mRequestedClients);
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:98: error: method does not override or implement a method from a supertype
@Override
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:100: error: cannot find symbol
super.onCreate(b);
^
symbol: variable super
location: class BaseGameActivity
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:107: error: method does not override or implement a method from a supertype
@Override
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:109: error: cannot find symbol
super.onStart();
^
symbol: variable super
location: class BaseGameActivity
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:110: error: incompatible types: BaseGameActivity cannot be converted to Activity
mHelper.onStart(this);
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:113: error: method does not override or implement a method from a supertype
@Override
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:115: error: cannot find symbol
super.onStop();
^
symbol: variable super
location: class BaseGameActivity
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:119: error: method does not override or implement a method from a supertype
@Override
^
/home/AndroidProject/platforms/android/app/src/main/java/com/berriart/cordova/plugins/BaseGameActivity.java:121: error: cannot find symbol
super.onActivityResult(request, response, data);
^
symbol: variable super
location: class BaseGameActivity
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
12 errors

FAILURE: Build failed with an exception.

Posts: 1

Participants: 1

Read full topic

How can i do a loading without box-shadow in Ionic 4?

$
0
0

@bartola wrote:

This is my code:

In JS:

this.loader = await this.loadingCtrl.create({
cssClass: ‘custom-class’
});
await this.loader.present();

In CSS:
.custom-class {
–box-shadow: none;
}

But it doesnt work

Posts: 1

Participants: 1

Read full topic

How do I access the IonReactRouter history object outside of components?

Possible Ionic integration with Svelte?

$
0
0

@lapoguidi wrote:

Hello all,
I’m not a Ionic framework expert.
I have some apps coded using Svelte.
Is and integration between Ionic and Svelte possible, like @ionic/vue for Vuejs?
Thank you very much

Posts: 1

Participants: 1

Read full topic

HTTP Call working on laptop, but not working on Android device

$
0
0

@Sweg wrote:

Hi all,

I am trying to create an Ionic app that makes calls to the IMDB API.

The app is working fine (displaying data, etc.) when I run the app on my laptop.

But when I run the app on my android device (ionic cordova run android --device), the app displays but I’m not able to display any data.

Can someone please tell me why this is happening, & what I need to do to enable the app to work on my mobile device?

Posts: 1

Participants: 1

Read full topic

-aot flag not generating proper build

$
0
0

@caio1985 wrote:

Hi,

I have a browser project and I used to build it with:
ionic build --minifyjs --minifycss --aot --release

It used to generated the files in the www folder, there I could open the index.html normally and everything would work fine, locally and on the host.

These days I got a warning saying my npm or node was old and I decided to update them, however now, the --aot flag once passed in the build command, generates a build that doesn’t not work (shows only the page background but doesn’t move forward as if the start method wasn’t called to run the application). If I remove the --aot it will work fine but the problem is that it takes much more time now.

If I open the Developer Tools on the build that is failing (with --aot), it doesn’t show any error messages, nothing. I’m having hard time trying to figure out what is wrong here.

Could someone please assist me?

Thanks!

Ionic:

   Ionic CLI          : 5.2.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.8
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/moreirac/Library/Android/sdk)
   NodeJS            : v10.16.2 (/usr/local/bin/node)
   npm               : 2.15.12
   OS                : macOS Mojave
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic/storage": "^2.2.0",
    "@pluritech/ion-mask": "^1.2.0",
    "@sentry/browser": "^5.6.1",
    "@sentry/cli": "^1.47.1",
    "@types/intro.js": "^2.4.5",
    "angular-sortablejs": "^2.7.0",
    "browser-image-compression": "0.0.3",
    "chart.js": "^2.8.0",
    "chartjs-plugin-datalabels": "^0.3.0",
    "chartjs-plugin-deferred": "^1.0.1",
    "chartnew.js": "^3.9.0",
    "clipboard": "^2.0.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^6.3.5",
    "firebaseui": "^3.6.1",
    "intro.js": "^2.9.3",
    "ionic-angular": "^3.9.8",
    "ionic-app-lib": "^2.2.1",
    "ionic-stepper": "^1.1.0",
    "ionic-tags-input": "^0.1.2",
    "ionicons": "3.0.0",
    "minimatch": "^3.0.4",
    "ng-circle-progress": "^1.4.1",
    "ng2-charts": "^1.6.0",
    "ng2-file-upload": "^1.3.0",
    "ng2-odometer": "^1.1.3",
    "ngx-currency-mask": "^4.3.2",
    "ngx-pica": "^1.1.4",
    "promise-polyfill": "^7.1.2",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "rxjs-tslint": "^0.1.7",
    "sjcl": "^1.0.8",
    "sortablejs": "^1.9.0",
    "survey-angular": "^1.1.3",
    "surveyjs-widgets": "^1.1.3",
    "sw-toolbox": "3.6.0",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.4",
    "typescript": "^2.9.2"
  },

Thanks in advance!

Posts: 1

Participants: 1

Read full topic


Rewarded video ads issue of Reward Events using AdMobFree plugin

$
0
0

@Danishgoheer17 wrote:

I’m using the cordova-Admob-free plugin for reward video ads. Everything is working perfectly. I’m facing the issue when user will watch the ad completely I’m using the event to check if the user watches the ad completely give it reward. But the issue is that when I’m using this event when ad completely watched ad is not closing this event hangs the ad. Close button not working on when ad completely watch. But when i comment this event then ad closing perfectly. Please help about it thanks,
document.addEventListener(‘admob.rewardvideo.events.REWARD’, () => {
alert(“GIVE USER A REWARD HERE”);

});

Posts: 1

Participants: 1

Read full topic

Problem With React Ionic Component

$
0
0

@veerne wrote:

I have two components similars, Component One get a username and, Component Two get a password, i load a Component One/Two with this.state but when component One is DidUnmount the Component Two have de value input of Component One ._.

View(target: String) {
    if (target === "Username") {
      return (
        <>
          <IonCardTitle className="LoginTitle">
            Bienvenido, Ingresa tu nombre de usuario.
          </IonCardTitle>

          <IonItem className="">
            <IonLabel position="floating" >Usuario</IonLabel>
            <IonInput
              name="UserName"
              min="5"
              onIonChange={(e) => this.InputUsername(e.target as HTMLInputElement)}
              type="text"></IonInput>
          </IonItem>
        </>
      );
    }
    if (target === "Password") {
      return (
        <>
          <IonCardTitle className="LoginTitle">
            Bienvenido, Ingresa tu contraseña.
          </IonCardTitle>

          <IonItem className="">
            <IonLabel position="floating" >Contraseña</IonLabel>
            <IonInput
              name="Password"
              onIonInput={e => this.InputPassword(e.target as HTMLInputElement)}
              min="5"
              type="password"></IonInput>
          </IonItem>
        </>
      );
    }
  }

Posts: 1

Participants: 1

Read full topic

Splashscreen doesn't hide on FireOS

$
0
0

@PierreSchwang wrote:

Hi :wave:,

I’m having a problem related to the splashscreen (or ionic / cordova in general?) and FireOS.
On Android the SplashScreen fades out when the app is ready. On FireOS (Amazon Fire Tablet) the SplashScreen stucks and nothing happens. I’m using the ionic cordova run android command to deploy the apk.
When I take a look at the console (using the chrome remote devices feature), the following output appears (FireOS).

Posts: 1

Participants: 1

Read full topic

How can I decrease spacing between col and rows in ion-grid?

$
0
0

@ShadeAJ wrote:

I have the below grid.

Below is the code in the html file.

<ion-grid>
  <ion-row>
    <ion-col>
      <ion-card padding>
        <ion-card-subtitle>
          Oil Change
        </ion-card-subtitle>
        <img src = "./assets/019-petrol.png">
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card padding>
        <ion-card-subtitle>
          Tire
        </ion-card-subtitle>
        <img src = "./assets/036-tires.png">
      </ion-card>
    </ion-col>
  </ion-row>
    <ion-row>
    <ion-col>
      <ion-card padding>
        <ion-card-subtitle>
          Car Wash
        </ion-card-subtitle>
        <img src = "./assets/31-carwash.png">
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card padding>
        <ion-card-subtitle>
          Diagnostic
        </ion-card-subtitle>
        <img src = "./assets/9-diagnostic.png">
      </ion-card>
    </ion-col>
  </ion-row>
  </ion-grid>

There is no code in the associated scss file. How can I decrease the spacing between the cols and rows in the most effective manner? Please let me know.

Posts: 1

Participants: 1

Read full topic

Return array to out of the scope

Header is not responsive in iphone X with ionic4.When created as a component

$
0
0

@surumulluprudhviraj wrote:

I created header as a component
header component .ts

Home

and i called that component in the home.page.ts

in the iphoneX toogle and click event is not working. if i use header instead of component its is working fine.

is there any solution to work component based header for iphoneX

Posts: 1

Participants: 1

Read full topic

Preventing password input field from auto clean after clicking on eye

$
0
0

@tango4567 wrote:

I am facing an issue when I click on the eye button to change password visibility, then the whole password input field clears automatically at the time of editing.

login.html

<ion-item>
	<ion-label position="floating">Password</ion-label>
   	<ion-input [type]="passwordType" [(ngModel)]="password" ngModel name="password" #passwordCtrl="ngModel"></ion-input>
	<ion-icon class="icon" [name]="iconName" (click)="hideShowPassword()" >
        </ion-icon>
</ion-item>

login.ts

 hideShowPassword() {
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
    this.iconName = this.iconName === 'eye-off' ? 'eye' : 'eye-off';
  }

Posts: 1

Participants: 1

Read full topic


How to know if checkbox has been checked using handler (data field) inside alert controller?

$
0
0

@dorisdarw wrote:

Hello, here’s my code:

const alert = await this.alertController.create({
header: ‘Checkbox’,
inputs: [
{
name: ‘agree’,
type: ‘checkbox’,
label: ‘I have read and agreed with the terms of…’,
value: ‘value1’,
checked: false
}
],
buttons: [
{
text: ‘Cancel’,
role: ‘cancel’,
cssClass: ‘secondary’,
handler: () => {
console.log(‘Confirm Cancel’);
}
}, {
text: ‘Ok’,
handler: (data) => {
console.log(data.agree[‘checked’]);
if(data.agree) {
console.log(“Ok”);
return true;
}
else {
return;
}
}
}
]
});

I want to know if the user has checked the box with “I have read and agreed…” to let him navigate to a new page. I have tried many things to access the “checked” property of the checkbox called “agree”. Usually, in an alert prompt, I’d call a field “email” and access it using data.email but here, it doesn’t seem to work.
Anyone know what I can do?

Posts: 1

Participants: 1

Read full topic

Ionic 4 IOS FIRESTORE INTERNAL ASSERTION FAILED: AsyncQueue is already failed: An internal error was encountered in the Indexed Database server

$
0
0

@FrutasLuna wrote:

Hello to the entire Ionic community, I am developing an Ionic application, I am using Firestore as a database, using offline mode.

import {AngularFirestoreModule} from ‘@ angular / fire / Firestore’;
AngularFirestoreModule.enablePersistence (),

When I open the application everything works very well, even offline mode, if I remove the internet, the application continues to work and when I connect the application to the internet, sends the changes to de DB made in offline mode correctly.

My problem is that, if the application stays open in background mode when I re-opening it always tells me this error:

FIRESTORE (6.2.4) INTERNAL ASSERTION FAILED: AsyncQueue is already failed: An internal error was encountered in the Indexed Database server.

And I can no longer navigate anywhere in the application because I have the condition that the subscription is alive until the component is destroyed (that happens when I change the page)
takeUntil (componentDestroyed (this)):

I get the following error:

“1 errors occurred during unsubscription: 1) Error: FIRESTORE (6.2.4) INTERNAL ASSERTION FAILED: AsyncQueue is already failed: An internal error was encountered in the Indexed Database server”

And the full application stops working and it is very annoying to have to close it and reopen

So, folks, I come to you to see if there is any different way this way, I already looked at StackOverflow, Github, all google and I can’t find the solution.
What I have seen the other applications like Netflix, HBO, etc. do. is that when you reopen the application does not start exactly where it stayed, it warns you that it is loading, and when it finishes loading it leaves you very close to where you were before leaving the application without activity. I imagine it has a background and foreground change detector and a function for each event.

I was thinking that with ionic cycles I could solve that problem:

Detect the change to the background and unsubscribe and re-subscribe if I detect the change to the foreground.

Do you know in any way to do that?

Do you have any other solution?

I very much appreciate your attention and collaboration

Posts: 1

Participants: 1

Read full topic

Google Maps showing blank

$
0
0

@DSA2 wrote:

Hi,

I am new to ionic. I have created a project and tried to use Google Maps Javascript API. When I comppile my app and run it in Chrome browser, there is not error but map is not getting displayed. The code is as follows:

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {
  myMap: any;
  @ViewChild('map', {static: false}) mapelement: any;

  constructor() {
   }

  ngOnInit() {
    // this.initMap();
  }

  ionViewDidEnter() {
    console.log('View did load initiated......');
    this.initMap();
  }

  initMap() {
    let coords = new google.maps.LatLng(51.6520, 0.7666);
    let mapOptions: google.maps.MapOptions = {
      center: {lat: 51.6520, lng: 0.7666},
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 14
    };

    this.myMap = new google.maps.Map(this.mapelement.nativeElement, mapOptions);
    let marker: google.maps.Marker = new google.maps.Marker({
      map: this.myMap,
      position: {lat: 51.6520, lng: 0.7666}
    });
  }
}

In index.html, I have added the Script code with maps API key. I tried to use debugger but there is no error, still map is not visible.

Regards.

Posts: 1

Participants: 1

Read full topic

Ionic throwing error

$
0
0

@Funarikest wrote:

I tried to run my app using ionic serve --lab and it giving this error. Please,i need help

C:\Users\ESTHER\Documents\Book-Store>ionic
internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module ‘C:\Users\ESTHER\Documents\Book-Store\node_modules\ionic\bin\ionic’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

C:\Users\ESTHER\Documents\Book-Store>ionic start
internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module ‘C:\Users\ESTHER\Documents\Book-Store\node_modules\ionic\bin\ionic’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3

Posts: 1

Participants: 1

Read full topic

'ion-fab-button' is not a known element

$
0
0

@Soloeco wrote:

Hi there,

I’m trying to implement a ion-fab-button but however I give it a try it does not work properly. As mentioned in the title it is not a known element and I can’t find a solution for that.

I’m working with VS Code. Would be nice if someone can help me out!

<ion-content>
  <ion-fab>
    <ion-fab-button>
      
    </ion-fab-button>
  </ion-fab>
</ion-content>

Posts: 1

Participants: 1

Read full topic

Viewing all 71531 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>