Ionic-native: Can't import AndroidPermissions on Ionic4/Angular

Created on 28 Feb 2020  路  2Comments  路  Source: ionic-team/ionic-native

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
I'm trying to use @ionic-native/android-permissions on my Ionic app but I get some (as I have seen, quite common) errors while importing it on my module and constructor.

Expected behavior:
Supposedly, I should be able to put AndroidPermissions (from @ionic-native/android-permissions/ngx) as a provider on my @NgModule but it gives me an error while compiling:

Type 'AndroidPermissionsOriginal' is not assignable to type 'Provider'. Type 'AndroidPermissionsOriginal' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.

Also, I should be able to import it on the constructor of my page, but it gives me an error as well:

'AndroidPermissions' refers to a value, but is being used as a type here.

Steps to reproduce:
Install android-permissions

ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions

Related code:
patient-callscreen.page.ts

...
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({...})
export class PatientCallscreenPage implements OnInit {
  ...
  constructor(
    ...
    private androidPermissions: AndroidPermissions) {

    ...
  }
  ...
}

patient-callscreen.module.ts

...
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  imports: [...],
  providers: [AndroidPermissions],
  declarations: [...]
})
export class PatientCallscreenPageModule {}

package.json

{
  ...
  "dependencies": {
    ...
    "@ionic-native/android-permissions": "^5.21.6",
    ...
    "@ionic-native/core": "^5.21.6",
    ...
    "cordova-plugin-android-permissions": "^1.0.2",
    ...
  },
  ...
  "cordova": {
    "plugins": {
      ...
      "cordova-plugin-android-permissions": {},
      ...
    },
    ...
  }
}

Other information:
I have seen a bunch of these errors occurring everywhere on the internet, even issues on this repository... Is there a general problem maybe?

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   Ionic CLI                     : 6.1.0 (C:\Users\Ianick\AppData\Roaming\nvm\v12.8.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Users\Ianick\AppData\Local\Android\Sdk)
   NodeJS            : v12.8.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.10.2
   OS                : Windows 10

Most helpful comment

Yes! I'm sorry for not answering when I found it, it took me a very long time...
Turns out the compiler was behaving strangely and parsing import {AndroidPermissions} from '@ionic-native/android-permissions/ngx' as just import {AndroidPermissions} from '@ionic-native/android-permissions/', must have been some buggy code. Anyway, I first deleted the folder from node_modules and it did the thing, but I wasn't satisfied with the result since it relied on deleting folders on every npm install and it is hard for working on a big project with a big team. After a lot of trial and error, I found out that I could explicitly tell the compiler that ngx was a directory and not "garbage" (AFAIK it was treated that way) by adding a slash at the end, resulting in:

import {AndroidPermissions} from '@ionic-native/android-permissions/ngx/'; // Notice the '/' at the end

It would also work using

import {AndroidPermissions} from '@ionic-native/android-permissions/ngx/index';

It was such an easy trivial thing that I did not consider whatsoever... From now on guys, prevent bugs/misunderstandings in compilers by being as explicit as possible.

All 2 comments

Same issue here, still no solution??

Yes! I'm sorry for not answering when I found it, it took me a very long time...
Turns out the compiler was behaving strangely and parsing import {AndroidPermissions} from '@ionic-native/android-permissions/ngx' as just import {AndroidPermissions} from '@ionic-native/android-permissions/', must have been some buggy code. Anyway, I first deleted the folder from node_modules and it did the thing, but I wasn't satisfied with the result since it relied on deleting folders on every npm install and it is hard for working on a big project with a big team. After a lot of trial and error, I found out that I could explicitly tell the compiler that ngx was a directory and not "garbage" (AFAIK it was treated that way) by adding a slash at the end, resulting in:

import {AndroidPermissions} from '@ionic-native/android-permissions/ngx/'; // Notice the '/' at the end

It would also work using

import {AndroidPermissions} from '@ionic-native/android-permissions/ngx/index';

It was such an easy trivial thing that I did not consider whatsoever... From now on guys, prevent bugs/misunderstandings in compilers by being as explicit as possible.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kyleap picture kyleap  路  4Comments

sabariferin picture sabariferin  路  4Comments

wwallace picture wwallace  路  4Comments

JaneDawson picture JaneDawson  路  4Comments

danbucholtz picture danbucholtz  路  3Comments