I want to draw multiple polygons with lats and longs on one map page this is how i am currently doing

drawingWithcoordinates() {

    var polygons = [];

    var map;

    var bounds = new google.maps.LatLngBounds();

    map = new google.maps.Map(

      document.getElementById("map"), {

      center: new google.maps.LatLng(-34.397, 150.644),

      zoom: 13,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    this.firestore.collection('locations').doc('3').get().subscribe(data => {

      if (data.exists) {

        this.variable = data;

        console.log(this.variable);

        console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);

        var custom = [

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,

            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue

          ),

        ];

        polygons.push(new google.maps.Polygon({

          path: custom,

          geodesic: false,

          strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,

          strokeOpacity: 1.0,

          strokeWeight: 1,

          map: map

        }));

        map.fitBounds(bounds);

      }

      else {

        console.log('data dont exists');

      }

    })

    this.firestore.collection('locations').doc('8').get().subscribe(data => {

      if (data.exists) {

        this.vareight = data;

        console.log(this.vareight);

        console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);

        var customeight = [

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue

          ),

          new google.maps.LatLng(

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,

            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue

          ),

        ];

        polygons.push(new google.maps.Polygon({

          path: customeight,

          geodesic: false,

          strokeOpacity: 1.0,

          strokeWeight: 1,

          map: map

        }));

        map.fitBounds(bounds);

      }

      else {

        console.log('no data for 8 length');

      }

      google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);

    });

  }drawingWithcoordinates() {
    var polygons = [];
    var map;
    var bounds = new google.maps.LatLngBounds();

    map = new google.maps.Map(
      document.getElementById("map"), {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    this.firestore.collection('locations').doc('3').get().subscribe(data => {
      if (data.exists) {
        this.variable = data;
        console.log(this.variable);
        console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
        var custom = [
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
            this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
          ),


        ];

        polygons.push(new google.maps.Polygon({
          path: custom,
          geodesic: false,
          strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,
          strokeOpacity: 1.0,
          strokeWeight: 1,
          map: map
        }));
        map.fitBounds(bounds);


      }
      else {
        console.log('data dont exists');

      }
    })

    this.firestore.collection('locations').doc('8').get().subscribe(data => {
      if (data.exists) {
        this.vareight = data;
        console.log(this.vareight);
        console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
        var customeight = [
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue
          ),
          new google.maps.LatLng(
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,
            this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue
          ),

        ];

        polygons.push(new google.maps.Polygon({
          path: customeight,
          geodesic: false,
          strokeOpacity: 1.0,
          strokeWeight: 1,
          map: map
        }));
        map.fitBounds(bounds);
      }
      else {
        console.log('no data for 8 length');

      }
      google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);
    });

  }

1 post - 1 participant

Read full topic

Looking to Renew or Buy your antivirus from reputated brands and companies?

DGCart is Independent online Ecommerce store its vision to help customers to buy or renew norton antivirus as per their choices to secure their devices like computers and phones etc.

DG Cart is redefining the Ecommerce store it is renowned for our first class customer service and we strive to ensure the satisfaction of each and every customer.

Defend yourself and the entire family against the latest virus, malware, spyware and ransomware attacks while staying on top of your privacy and identity.

Here DG Cart comes with its vision to help customers to buy or renew norton antivirus as per their choices to secure their devices like PC, Mobile, Tablets etc

1 post - 1 participant

Read full topic

When you take pdf anyother file from download you get URI with content://. So in order to resolve i use this package to get file URI path https://www.npmjs.com/package/cordova-plugin-filepath

It returns error code: 1 // not found

const options: CameraOptions = {
          quality: 50,
          destinationType: this._camera.DestinationType.FILE_URI,
          mediaType: this._camera.MediaType.ALLMEDIA,
          sourceType: this._camera.PictureSourceType.SAVEDPHOTOALBUM,
          saveToPhotoAlbum: false,
        };

 if (file.indexOf("content://") > -1) {
          console.log("content //", file);
          window.FilePath.resolveNativePath(file, (success) => {
            console.log(success, "content");
            window.resolveLocalFileSystemURL(success, (fileEntry) => {
              console.log(fileEntry, "fileEntry");
              fileEntry.file((finalFile) => {
                console.log(finalFile, "resolve");
                resolve(finalFile);
              });
            });
          });
        }

chrome://inspect

1 post - 1 participant

Read full topic

Hello,

I’m currently trying to implement CameraPreview in my app.
When I try to put CameraPreview in providers of app.module.ts, I just got this error message :

Type 'CameraPreviewOriginal' is not assignable to type 'Provider'.

I just tried to reinstall the package, but nothing change, even if I clear node_modules, clean project etc… Does anyone has already fixed similar problem ?

I’m using cordova and angular. Maybe there’s one of my dependencies that is incompatible ?

Thanks.

There is my app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule, HAMMER_GESTURE_CONFIG } 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 { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { SharedModule } from './includes/shared/shared.module';
import { TranslateConfigService } from './includes/services/translation/translate-config.service';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';
import { Network } from '@ionic-native/network/ngx';
import { HttpInterceptorHandler } from './includes/common/http/http.interceptor';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

import { IonicGestureConfig } from './includes/common/utils/IonicGestureConfig';
import { Printer } from '@ionic-native/printer/ngx';
import { File } from '@ionic-native/file/ngx';
import { registerLocaleData, DatePipe } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import { Badge } from '@ionic-native/badge/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { Downloader } from '@ionic-native/downloader/ngx';

import { Camera } from '@ionic-native/camera/ngx';
import { IonicStorageModule } from '@ionic/storage';

import { FCMPluginOnIonic } from "cordova-plugin-fcm-with-dependecy-updated/ionic";
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import { LaunchReview } from '@ionic-native/launch-review/ngx';
import { Market } from '@ionic-native/market/ngx';
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { CameraPreview } from '@ionic-native/camera-preview';

registerLocaleData(localeFr);

export function LanguageLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({}),
    IonicStorageModule.forRoot(),
    AppRoutingModule, 
    HttpClientModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    })],
  providers: [
    StatusBar,
    SplashScreen,
    TranslateConfigService,
    ImagePicker,
    CameraPreview,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorHandler,
      multi: true
    },
    {
      provide: HAMMER_GESTURE_CONFIG, 
      useClass: IonicGestureConfig
    },
    ScreenOrientation,
    AppVersion,
    AppAvailability,
    InAppBrowser,
    FingerprintAIO, 
    Network,
    BarcodeScanner,
    Printer,
    File,
    Badge,
    DatePipe,
    AndroidPermissions,
    Downloader,
    Camera,
    FCMPluginOnIonic,
    FileTransfer,
    PhotoViewer,
    LaunchReview,
    Market
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And my package.json :

{
  "name": "koustcompany",
  "version": "2.3.1",
  "author": "Koust",
  "homepage": "https://koust.net/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js",
    "browser": "ionic serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@ionic-native/android-permissions": "^5.28.0",
    "@ionic-native/app-availability": "^5.27.0",
    "@ionic-native/app-version": "^5.27.0",
    "@ionic-native/badge": "^5.28.0",
    "@ionic-native/barcode-scanner": "^5.30.0",
    "@ionic-native/camera": "^5.30.0",
    "@ionic-native/camera-preview": "^5.30.0",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/device-motion": "^5.30.0",
    "@ionic-native/downloader": "^5.28.0",
    "@ionic-native/file": "^5.30.0",
    "@ionic-native/file-transfer": "^5.28.0",
    "@ionic-native/fingerprint-aio": "^5.27.0",
    "@ionic-native/image-picker": "^5.30.0",
    "@ionic-native/in-app-browser": "^5.28.0",
    "@ionic-native/intercom": "^5.28.0",
    "@ionic-native/launch-review": "^5.28.0",
    "@ionic-native/market": "^5.29.0",
    "@ionic-native/network": "^5.27.0",
    "@ionic-native/photo-viewer": "^5.28.0",
    "@ionic-native/printer": "^5.28.0",
    "@ionic-native/screen-orientation": "^5.27.0",
    "@ionic-native/screenshot": "^5.28.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.30.0",
    "@ionic/angular": "^5.3.1",
    "@ionic/storage": "^2.3.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/hammerjs": "^2.0.36",
    "@types/jquery": "^3.5.1",
    "br-mask": "0.0.10",
    "chart.js": "^2.9.3",
    "cordova-browser": "6.0.0",
    "es6-promise-plugin": "^4.2.2",
    "hammerjs": "^2.0.8",
    "integrator-cordova-plugin-downloader": "^1.1.0",
    "ionic2-calendar": "^0.6.6",
    "ngx-barcode": "^0.3.0",
    "ngx-gauge": "^1.1.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.12",
    "@angular/cli": "^9.1.12",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "2.2.1",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.54",
    "codelyzer": "^5.1.2",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "com.darktalker.cordova.screenshot": "^0.1.6",
    "cordova-android": "^9.0.0",
    "cordova-ios": "^6.1.1",
    "cordova-launch-review": "^4.0.0",
    "cordova-plugin-android-permissions": "^1.1.0",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^5.0.0",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-device-motion": "^2.0.1",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.2.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-fingerprint-aio": "^3.0.1",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-intercom": "^9.2.1",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-printer": "git+https://github.com/katzer/cordova-plugin-printer.git",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-res": "^0.15.1",
    "cordova-sqlite-storage": "^5.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jetifier": "^1.6.6",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
  "description": "Koust application",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-appavailability": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-file": {},
      "cordova-plugin-fingerprint-aio": {
        "FACEID_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-printer": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-intercom": {},
      "cordova-plugin-fcm-with-dependecy-updated": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-file-transfer": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-device": {},
      "cordova-launch-review": {
        "ANDROID_PLAY_SERVICES_CORE_VERSION": "1.8.0"
      },
      "com.darktalker.cordova.screenshot": {},
      "cordova-plugin-market": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-device-motion": {},
      "cordova-plugin-telerik-imagepicker": {},
      "cordova-plugin-camera-preview": {}
    },
    "platforms": [
      "ios",
      "android",
      "browser"
    ]
  }
}

1 post - 1 participant

Read full topic

Hi,
I want to reveal an HTML div which is in a Stencil component, using ScrollRevealjs library

Can you help me with an example ?

Thx

1 post - 1 participant

Read full topic

I am getting this error for the first time No package.json file found in root of project.
Please help

3 posts - 3 participants

Read full topic

Hello everyone,

I’m trying to access an rest server running nginx (using axios) with a self-signed certificate (for development purposes).
It’s working from within the browser, but failing when running on Android. It just returns an Request aborted without any information:

chunk-vendors.fa7cefd0.js:1 Uncaught (in promise) Error: Request aborted
    at t.exports (chunk-vendors.fa7cefd0.js:1)
    at XMLHttpRequest.v.onabort (chunk-vendors.fa7cefd0.js:33)

Online I’ve read that this is caused by invalid certificates. Things I’ve done to resolve:

1. Went to the browser (on my phone) and accepted the security risk from this unknown certificate.
2. Installed .p12 file on my phone (as app certificate) that i’ve created using my .crt and .key file

I still get the aborted error

So I decided to use native http calls ignoring ssl certificates all together, however my app now use javascript library hls.js to stream livevideo. This library offcourse doesn’t use native HTTP calls.

So I need to tackle the root issue, but I don’t know what that is and how to resolve.

Anyone who has experience with certificates, openssl, android, capacitor and nginx all together? Any help is appreciated.

1 post - 1 participant

Read full topic

Hi all, since yesterday can’t build any of my apps, in iOS or Android.

The error is the same, “No ‘appflow:build’ or ‘build’ script found in package.json.”

A couple of days ago, the same code and config worked perfectly.

Are proyects that come from PhoneGap and use the package.json as the migration guide:

{
“name”: “ionic-app-flow-demo”,
“version”: “1.0.0”,
“description”: “Appflow demo”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}

In the log, what is new, is this lines in the beginning:

: --------------------------------
: — Step: get_appflow_config —
: --------------------------------
: Checking for appflow.config.json
: Appflow config not detected

And later when fail:

: --------------------------------
: — Step: import_certificate —
: --------------------------------
: Setting key partition list… (this can take a minute if there are a lot of keys installed)
: ---------------------------
: — Step: build_pro_app —
: ---------------------------
: Installing Dependencies
: $ npm install --quiet --no-optional
: ▸ up to date in 0.216s
: ▸ found 0 vulnerabilities
: -------------------------
: — Step: upload_logs —
: -------------------------
: ---------------------------
: — Step: shell command —
: ---------------------------
: -----------------------------
: — Step: delete_keychain —
: -----------------------------
: No ‘appflow:build’ or ‘build’ script found in package.json.

In the working build log looks like this:

: --------------------------------
: — Step: import_certificate —
: --------------------------------
: Setting key partition list… (this can take a minute if there are a lot of keys installed)
: ---------------------------
: — Step: build_pro_app —
: ---------------------------
: Installing Dependencies
: npm install --quiet --no-optional : ▸ up to date in 0.22s : ▸ found 0 vulnerabilities : Generating app manifest... : ionic deploy manifest
: ▸ [OK] Appflow Deploy manifest written to ./www/pro-manifest.json!
: ----------------------------------
: — Step: add_cordova_to_index —
: ----------------------------------
: cordova.js already present in index.html: skipping
: --------------------------------------
: — Step: cordova platform add ios —
: --------------------------------------

Is seems like something change, and now some config is missing (I don’t know if the idea is that we need to add them to the project or something is wrong with Appflow).

Any idea are appreciated, we need to build asap!

Thanks!

1 post - 1 participant

Read full topic

In this page: https://stenciljs.com/docs/component is the only mention of ModeStyles

/**
 * Similar as `styleUrl` but allows to specify different stylesheets for different modes.
 */
  styleUrls?: string[] | d.ModeStyles;

Are there any official documentation on how to properly set this mode, that works in all major UI frameworks?

1 post - 1 participant

Read full topic

Dears,

we have to compile and load Dynamic Components… works in dev but in production mode (AOT enabled) we get the error “template must be a string”.

APp config:

• “@angular/core”: “~9.1.6”,
• “@ionic/angular”: “^5.0.0”,

@Component({
 template: componentTemplate,
 selector: templateDef.name,
 })
 class TemplateComponent extends DynamicUiBaseComponent implements OnInit {
 
 ngOnInit() {
 super.ngOnInit();
 }
 }
....
this.compiler.compileModuleAndAllComponentsSync(DynamicModule);

1 post - 1 participant

Read full topic

I am just getting started with Ionic, Vue 3 and Capacitor. To get a feel I started the tutorial at https://ionicframework.com/docs/vue/your-first-app. My setup is currently like this:

Ionic:
   Ionic CLI : 6.12.2

Utility:
   cordova-res : 0.15.2
   native-run  : 1.3.0

System:
   NodeJS : v14.15.1
   npm    : 6.14.8
   OS     : macOS Catalina

What struck me first was the number of deprecation warnings when creating a blank project with
ionic start test-app tabs --type vue --capacitor
Here are some of the warnings:

npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated core-js@2.6.12: 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.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()

What kind of worries me most here is a dependency on fsevents 1 which supposedly breaks on node 14+, but the current LTS version of node (as recommended in the tutorial) ist 14.15.1.

Templates
When I look at the generated sources, VSCode gives me a deprecation warning in Tabs.vue that the 'slot' attributes are deprecated (since Vue 2.6.0). I was under the impression that the version of Vue that ships with Ionic is 3.0 now. So is this an outdated template that is being used or am I missing something else here?

Versions
When looking at the package.json that is generated by ionic start I also see some outdated dependencies (like @ionic/vue, @ionic/vue-router). Here is what my current package.json looks like:

"dependencies": {
    "@capacitor/core": "2.4.4",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  },

Do I have to update these myself or is ionic-cli taking care of this at some point?

Thanks for your pointers. I find this a bit confusing for a start. I come from iOS native with Swift.

1 post - 1 participant

Read full topic

Hi,
I want to reveal an HTML div which is in a Stencil component, using ScrollRevealjs library

Can you help me ?

Here is my code

export class MyComponent {
   ....
   initScrollReveal(el) {
    ScrollReveal().reveal(el, {
      console.log(el);
      distance: '150px',
      duration: 1000,
      origin: 'bottom',
      easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
      interval: 150
    });
  }

  render() {
    return(
      <div class="tile big-tile" ref={el=>this.initScrollReveal(el)}>
           hello
      </div>
    )
  }
}

However, my console.log returns the div with ref… so i don’t understand

Thx

1 post - 1 participant

Read full topic

Hi all

This is probably a very Ionic beginner question:

When I’m using an IonContent-block within an IonModel I would expect that the IonContent uses the whole height of the modal.

To test it I started a blank Vue.js project and used the sample code from https://ionicframework.com/docs/api/modal to create a modal. The only thing I changed was the content of the modal.

The modal component can be found on Github: https://github.com/chrigu/modaldemo/blob/b8b98962b21b332c118187cd227788cbfe8ef458/src/views/Modal.vue

Screenshot 2020-12-09 at 16.42.031402×1442 82.1 KB

The IonContent’s main-Element is always 56px in height and you can only see the content if you use the scrollbars.

The code can be found here: https://github.com/chrigu/modaldemo

How can you make the IonContent to expand so that it uses the height of the modal?

Thanks in advance!

2 posts - 2 participants

Read full topic

Hi Dear,
I am recently updating an app in ionic v3 version to v4, I have a problem loading data and a modal component, which previously works perfectly in ionic v3.

When using the push method, data is not loaded on the screen.

Line 145:

this.dataFiltered.push(...response);

I change for this:

this.dataFiltered  = response;

The data is now loaded, the infinite scroll does not work.

My .ts file:

import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController, ModalController, IonInfiniteScroll, IonVirtualScroll, NavParams } from '@ionic/angular';
import { SelectModalPagedInterface } from '../../../interfaces/select-modal-paged-interface';
import { CustomModalModel } from '../../../models/customModalModel';
import { KeyValue } from '../../../models/keyValue';
import { TipoCampoEntity } from '../../../database-entities/modulo-os/TipoCampoEntity';
import { OrdemServicoCampoValorEntity } from '../../../database-entities/modulo-os/OrdemServicoCampoValorEntity';
import { StringHelper } from '../../../helpers/string-helper';
import { NavigationExtras, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'page-select-modal-paged',
    templateUrl: 'select-modal-paged.html',
})
export class SelectModalPagedPage implements OnInit {
    navTitle: String;

    dataFiltered: Array<KeyValue | CustomModalModel> = [];

    data: Array<KeyValue | CustomModalModel> = [];

    codigo: string;

    descricao: string;

    dataSelected: number;

    interface: SelectModalPagedInterface<KeyValue | CustomModalModel>;

    tipoCampoId: number;

    codigoParametroPai: string;

    hasFinished: boolean;

    filter: string;

    tipoCampo: TipoCampoEntity;

    valorCampos: OrdemServicoCampoValorEntity[];

    customized: boolean;

    modoFiltragem: boolean;

    tipoCampoNome: string;
    equipamento: number;

    @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
    private count = 0;

    constructor(
        public navCtrl: NavController,
        private modal: ModalController,
        private navParams: NavParams,
        private activeRoute: ActivatedRoute
    ) {
        this.navTitle = this.navParams.data.modalParams['title'];
        this.codigo = this.navParams.data.modalParams['codigo'];
        this.descricao = this.navParams.data.modalParams['descricao'];
        this.dataSelected = this.navParams.data.modalParams['dataSelected'];
        this.interface = this.navParams.data.modalParams['interface'];
        this.tipoCampoId = this.navParams.data.modalParams['tipoCampoId'];
        this.codigoParametroPai = this.navParams.data.modalParams['codigoParametroPai'];
        this.tipoCampo = this.navParams.data.modalParams['tipoCampo'];
        this.valorCampos = this.navParams.data.modalParams['valorCampos'];
        this.customized = this.navParams.data.modalParams['customized'];
        this.modoFiltragem = this.navParams.data.modalParams['modoFiltragem'];
        this.tipoCampoNome = this.navParams.data.modalParams['tipoCampoNome'];
        this.equipamento = this.navParams.data.modalParams['equipamento'];
    }

    async ngOnInit() {
        await this.loadData();
        console.log(this.dataFiltered);
    }

    fechar() {
        this.modal.dismiss();
    }

    confirmar() {
        this.modal.dismiss(this.dataSelected);
    }

    filterItems(ev: any) {
        this.filter = ev.target.value;

        if (this.customized) {
            this.filterCustomized();
        } else {
            this.loadData(true);
        }
    }

    filterCustomized(): void {
        if (this.filter && this.filter !== '' && !StringHelper.isNullOrEmpty(this.filter)) {
            const desc = this.descricao;
            const cod = this.codigo;

            this.dataFiltered = this.data.filter((item) => {
                return String(item[desc]).toLowerCase().includes(this.filter.toLowerCase()) ||
                    String(item[cod]).toLowerCase().includes(String(this.filter).toLowerCase());
            });
        }
    }

    onChange() {
        this.virtualScroll.checkEnd();
    }

    async doInfinite(event) {
        console.log(event);
        setTimeout(async() => {
            await this.loadData();
            console.log(`chamou`);
            event.target.complete();
        }, 500);
    }

    private async loadData(byFilter: boolean = false): Promise<void> {
        return new Promise<void>(async (resolve, reject) => {
            try {
                if (this.customized) {
                    await this.loadDataCustomized();
                    resolve();
                } else {
                    if (byFilter) {
                        this.count = 0;
                        this.hasFinished = false;
                    }

                    const response = await this.interface.getData(this.count, this.tipoCampoId, this.filter, this.codigoParametroPai, this.tipoCampo, this.valorCampos, this.modoFiltragem, this.tipoCampoNome, this.equipamento);

                    this.count++;

                    if (response.length === 0) {
                        this.hasFinished = true;
                        if (byFilter) {
                            this.dataFiltered = [];
                        }
                    } else if (byFilter) {
                        this.dataFiltered = response;
                    } else {
                        this.dataFiltered.push(...response);
                    }
                    resolve();
                }
            } catch (error) {
                reject();
            }
        });
    }

    private loadDataCustomized(): Promise<void> {
        return new Promise<void>((resolve, reject) => {
            try {
                this.interface.getData(this.count, this.tipoCampoId, this.filter, this.codigoParametroPai, this.tipoCampo, this.valorCampos, this.modoFiltragem, this.tipoCampoNome).then((response) => {
                    this.data = response;
                    this.dataFiltered = response;
                    resolve();
                });
            } catch (error) {
                reject();
            }
        });
    }
}

My html file:

<ion-header>
    <ion-toolbar navbar [color]="'primary'">
        <ion-title>{{navTitle}}</ion-title>
        <ion-buttons slot="primary">
            <ion-button (click)="fechar()">
                <ion-label class="ion-text-right">Fechar</ion-label>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>

    <ion-toolbar no-border-top>
        <ion-searchbar placeholder="Filtrar" (ionInput)="filterItems($event)">
        </ion-searchbar>
    </ion-toolbar>

</ion-header>

<ion-content radio-group>
    <ion-radio-group  [(ngModel)]="dataSelected">
        <ion-virtual-scroll [items]="dataFiltered" [approxItemHeight]="'60px'">
                <ion-item *virtualItem="let item">
                    <ion-label>                        
                        <ion-grid>        
                            <ion-row>
                                <ion-col class="code" class="ionic-text-wrap">
                                    {{item[codigo]}}
                                </ion-col>
                                <ion-col class="description ionic-text-wrap" *ngIf="navTitle.toString() != 'Patrimonio'">
                                    {{item[descricao]}}
                                </ion-col>
                                <ion-col class="description ionic-text-wrap" *ngIf="navTitle.toString() == 'Patrimonio'">
                                    PAT-{{item.campoAuxiliar}} - {{item[descricao]}}
                                </ion-col>
                            </ion-row>
                            <ion-row *ngIf="customized">
                                <ion-col class="description ionic-text-wrap">
                                    <ion-row>
                                        {{item.title}}
                                    </ion-row>
                                    <ion-row>
                                        {{item[descricao]}}
                                    </ion-row>
                                    <ion-row>
                                        {{item.description}}
                                    </ion-row>
                                </ion-col>
                            </ion-row>
                        </ion-grid>
                    </ion-label>
                    <ion-radio [value]="item[codigo]" [checked]="item[codigo] == dataSelected">
                    </ion-radio>
                </ion-item>    
            </ion-virtual-scroll>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="!hasFinished && !customized && !modoFiltragem">
                <ion-infinite-scroll-content loadingText="Carregamento mais {{navTitle | lowercase}}...">
                                        
                </ion-infinite-scroll-content>
            </ion-infinite-scroll>                
        </ion-radio-group>    
</ion-content>

        

<ion-button color="primary" expand="full" (click)="confirmar()" [disabled]="dataSelected === null">
    Confirmar
    <ion-icon name="ios-checkmark"></ion-icon>
</ion-button> 

1 post - 1 participant

Read full topic

Hello ,
i am using Angular with Ionic
i am using ion-tabs .
ion-tabs container , covers the entire screen
if you hover your mouse over your screen while inspecting (using element inspector) you can see it has a width of 100% and height of 100% , how ever it is not seen in normal view of application , but
the problem is :
when i have an element such as a div element or ion-item or etc … and i give it a click event
it won’t work , because user is basically clicking on the ion-tabs and not the content on screen .
i made sure this problem is because of ion-tabs element covering entire screen, when i changed it’s z-index to -1
and click listeners started working .
you also can try to inspect your page elements , you can see the only thing your inspector catches , is
ion-tabs element !
i don’t know why there is no topic like this or what am i probably doing wrong ?!
but this is so disappointing and disgusting , i hope i get a help ?
thanks !

4 posts - 2 participants

Read full topic

Hello, I’m getting the error you see in the title when running ionic serve.
The app is on github in a working state.
I tried to add the QRScanner Capacitor native plugin for Android, ios and Electron. So I installed all the packages

npm install @capacitor/core @capacitor/cli
npx cap init
npx cap add android
npx cap add ios
npx cap add electron

I had problems importing the plugin, it somehow wasn’t recognized as a provider… So when it wouldn’t serve:

[ERROR] ng has unexpectedly closed (exit code 127).

, I git reset --hard all the changes I made to the code after initial. So technically, this should be identical to what I have on Github right, but it still won’t run.
I’m just not sure if I did the above installs first, before pushing to Github, or after, but I certainly haven’t committed anything after trying to install the plugin.

I also installed Cordova because I thought I was gonna need it (honestly, the situation with Capacitor and Cordova is very confusing to me),but removing it again, hasn’t helped either.

(I looked at the other issues with this exact error on this forum , but they seem unresolved, or I overlooked the solution)

1 post - 1 participant

Read full topic

Hi community, I am trying to upload to Firebase Storage audio captured using MediaCapture, converting the MediaFile to blob, but when I read the file using readAsArrayBuffer or readAsDataUrl the buffer that returns is empty. I tried a lot of ways to do this but I didn’t solve it. Here is the newest code. Thanks!

    this.mediaCapture.captureAudio().then(res => {
      var date = new Date();
      try{
        let name = res[0].name;
        let path = res[0].fullPath.substr(0, res[0].fullPath.lastIndexOf('/'));
        this.file.resolveDirectoryUrl(path).then((resolvedPath: DirectoryEntry) => {
          this.file.readAsArrayBuffer(resolvedPath.nativeURL, name).then( (buffer:any) => {
            let blob = new Blob([buffer], {
              type: res[0].type,
            });
            this.angularFireStorage.ref('chats/'+ this.chat + '/users/' + this.user.uid + '/audio/' + date).put(blob);
          }).catch(error => {
            console.log(error);
          });
        });
      } catch(error){
        presentToast(error);
      }

1 post - 1 participant

Read full topic

Is it possible to get the page navigation animation/transition when navigating between two pages using the same component (same dynamic URL)?

Example:
Navigating from /menu/1 to /menu/2 where URL in router is /menu/:id

From what i understand I have to watch params, and content on page must be replaced.
This is ok in web (desktop), but on mobile I want the normal page transition.

In Ionic-Angular i think this was solved with Component ReuseStrategy, is there something similar for Vue?

I have found some Vue documentation around the subject of not reusing component, but i’m not sure how to implement with ion-router-outlet.

1 post - 1 participant

Read full topic

I was trying to do layouts which has more flexible and column based in Ionic and ion-grid, something similar to what is seen here. https://svelte-grid.now.sh/

I can’t seem to get column layouts using the ion-grid with Angular. Is there any resources or guidelines to help get a layout to what is available in that link.

Thanks

2 posts - 2 participants

Read full topic

When building our ionic app it builds fine when I build it from powershell. When we build in teamcity using the powershell step we get the following error.

Here is the error we get. I removed the parts of the path’s related to our build machine to keep it cleaner.

ERROR in ./src/global.scss (<path to application>/node_modules/css-loader/dist/cjs.js??ref--13-1!<path to application>/node_modules/postcss-loader/src??embedded!/node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/global.scss)
Module build failed (from <path to application>/node_modules/postcss-loader/src/index.js):
Error: Failed to find '@ionic/angular/css/core.css'
  in [
    <path to application>\projects\ta\src
   ]
   at resolveModule.catch.catch (<path to application>\node_modules\postcss-import\lib\resolve-id.js:35:13)
@ ./src/global.scss 2:26-225
@ multi ./src/theme/variables.scss ./src/global.scss ./src/theme/site.scss

I checked if the @ionic/angular/css/core.css file was really missing and it was in the node_modules.

We use the following command to build

ng run ta:build --verbose

I am not very familiar with building angular apps so if there is other information you need from me give me the heads up and I can provide it.

1 post - 1 participant

Read full topic