Ionic 3: Type "any" is not a constructor function type
I had an ionic 2 project in my linux mission when I got through and migrated to a mac with ionic 3.
So I created a new project and replaced the pages, provided, the components folder with the new project, I was getting an error, for example cannot find module "ionic-native"
after importing my plugins into the app.modulte.ts file. I get the error as "Type", any 'is not a type of constructor function.
my terminal shows
17:39:48] typescript: node_modules/@ionic-native/app-version/index.d.ts, line: 25
Type 'any' is not a constructor function type. [17:39:48] typescript: node_modules/@ionic-native/geolocation/index.d.ts, line: 127 [17:39:48] typescript: node_modules/@ionic-native/google-analytics/index.d.ts, line: 30 [17:39:48] typescript: node_modules/@ionic-native/network/index.d.ts, line: 49 [17:39:48] typescript: node_modules/@ionic-native/sms/index.d.ts, line: 41 [17:39:48] typescript: node_modules/@ionic-native/social-sharing/index.d.ts, line: 29 [17:39:48] typescript: node_modules/@ionic-native/sqlite/index.d.ts, line: 115
L25: export declare class AppVersion extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L127: export declare class Geolocation extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L30: export declare class GoogleAnalytics extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L49: export declare class Network extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L41: export declare class SMS extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L29: export declare class SocialSharing extends IonicNativePlugin {
Type 'any' is not a constructor function type.
L115: export declare class SQLite extends IonicNativePlugin {
[17:39:48] dev server running: http://localhost:8100/
in my browser i get an error like 
here is my package.json file
{
"name": "ionic-hello-world",
"version": "0.0.0",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.0.2",
"@angular/compiler": "4.0.2",
"@angular/compiler-cli": "4.0.2",
"@angular/core": "4.0.2",
"@angular/forms": "4.0.2",
"@angular/http": "4.0.2",
"@angular/platform-browser": "4.0.2",
"@angular/platform-browser-dynamic": "4.0.2",
"@ionic-native/app-version": "^3.6.1",
"@ionic-native/geolocation": "^3.6.1",
"@ionic-native/google-analytics": "^3.6.1",
"@ionic-native/network": "^3.6.1",
"@ionic-native/sms": "^3.6.1",
"@ionic-native/social-sharing": "^3.6.1",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/sqlite": "^3.6.1",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.1.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.6",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
"cordova-plugin-android-permissions",
"cordova-plugin-app-version",
"cordova-plugin-geolocation",
"cordova-plugin-google-analytics",
"cordova-plugin-network-information",
"cordova-plugin-sms",
"cordova-plugin-x-socialsharing",
"cordova-sqlite-storage"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "kmart: An Ionic project"
}
after using npm install @ionic-native/core --save
I get an error like
source to share
I had it @ionic-native/core ^3.6.0
in my package.json. For me the problem was solved by importing my plugins like
import {File, Transfer, FilePath} from "ionic-native";
instead
import {FilePath} from "@ionic-native/file-path";
import {Transfer} from "@ionic-native/transfer";
import {File} from "@ionic-native/file";
source to share
I ran into the same problem yesterday after updating my rather old version to a new one. I had to follow many steps to get it working in the end. Here is what I need to do, or how I solved it. First I created the 'dummy' project
ionic start myApp tabs
i opened package.json
and compared all versions with my current one and updated them accordingly (you can use npm outdated
to see the latest versions and the versions you installed).
Unfortunately this did not solve my problem, I could build my project, but I have the same error as you cannot find module "ionic-native"
after running.
After reading a lot of posts and tips, I did the following (many other bugs appeared and this is how I solved them all).
Open app.module.ts
and check your imports
Before:
imports: [
IonicModule.forRoot(MyApp),
Ionic2RatingModule
]
After:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
Ionic2RatingModule,
HttpModule /* in case you used http before */
]
The next important step is to find all the code for import from "ionic-native"
If you find something like this, you need to change / update it to a newer version. (Typically this is for splashScreen and statusBar in your app.component.ts)
Before:
import { StatusBar, Splashscreen } from 'ionic-native';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
platform.pause.subscribe(e=>{
})
}
}
After:
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
platform.pause.subscribe(e => {
})
}
}
Check the constructor and imports, they have changed! I had to make all these changes for everything that was imported through MODULE import from "ionic-native"
, for example: StatusBar, SplashScreen, Camera, Network, Transfer, Geolocation ...
Also keep in mind that you must now add them to the section providers
in app.module.ts
If you can no longer find the module (as happened to me for the camera), make sure that you have imported the correct ionic module npm install --save @ionic-native/camera
At the very end you should not find any
MODULE import from "ionic-native"
again in your code. Hope this helps someone :)
source to share