Cannot build ionic 4 app with any native plugins: Error TS2304: Cannot find name 'FileTransfer'

Ionic Framework ionic-v3
1

Hi,

I am trying to migrate my Ionic v3 (Angular) app to Ionic v4 (Angular) and I am stuck trying to use any of the Ionic native plugins. Whenever I run ionic s I get the following compilation errors:

[ng] ERROR in src/app/services/chat.service.ts(48,27): error TS2304: Cannot find name 'FileTransfer'.
[ng] src/app/services/in-app-browser.service.ts(11,22): error TS2304: Cannot find name 'InAppBrowser'.
[ng] src/app/services/in-app-browser.service.ts(13,39): error TS2304: Cannot find name 'SafariViewController'.
[ng] src/app/services/push-notifications.service.ts(28,25): error TS2304: Cannot find name 'Device'.
[ng] src/app/services/push-notifications.service.ts(30,23): error TS2304: Cannot find name 'Push'.

My environment:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 21 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.15.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

Thanks for any help you can provide.

1 Like
2

Are you adding them to app.module?

providers: [
    StatusBar,
    SplashScreen,
    File,
    FileTransfer,
3

Thank you for your response, I was not! The error is now:

[ng] ERROR in src/app/app.module.ts(19,9): error TS2322: Type 'InAppBrowserOriginal' is not assignable to type 'Provider'.
[ng]   Type 'InAppBrowserOriginal' is not assignable to type 'ClassProvider'.
[ng]     Property 'provide' is missing in type 'InAppBrowserOriginal'.
[ng] src/app/app.module.ts(20,9): error TS2322: Type 'SafariViewControllerOriginal' is not assignable to type 'Provider'.
[ng]   Type 'SafariViewControllerOriginal' is not assignable to type 'ClassProvider'.
[ng]     Property 'provide' is missing in type 'SafariViewControllerOriginal'.
[ng] src/app/services/in-app-browser.service.ts(11,22): error TS2304: Cannot find name 'InAppBrowser'.
[ng] src/app/services/in-app-browser.service.ts(13,39): error TS2304: Cannot find name 'SafariViewController'.

with the following module declaration:

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 {SafariViewController} from '@ionic-native/safari-view-controller'
import {InAppBrowser} from '@ionic-native/in-app-browser'

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

Iā€™m guessing I am meant to use ā€˜useClassā€™ and ā€˜provideā€™ somehow but I am not sure how.

4

You started with FileTransfer issues. Can you confirm that works, when you add it to app.module?
I have never used safari-view-controller, so do not want to comment on it.

5

My apologies, it didnā€™t seem to matter the native module I was trying to use, the error was the same so I tested the first native module in my code.

Using only FileTransfer in the providers array in the module causes the same error. I have been able to resolve the compilation error by changing:

import { FileTransfer } from '@ionic-native/file-transfer'

to

import { FileTransfer } from '@ionic-native/file-transfer/ngx'

I donā€™t understand why this is required or why it is different from the online Ionic docs but it resolves the compilation errors and allows me to move towards real device testing.

Thank you very much for your help.

1 Like
6

In your package, are you using ā€œ@ionic-native/coreā€: ā€œ^5.0.0-beta.24ā€,
That could be why.

Glad its working!

8

Your question is outside the scope of this forum topic, I suggest you start a new topic and provide all the necessary information for someone to try help you.

I canā€™t offer any advice on your issue sorry.

1 Like