How to include pg-promise with Ionic 3 ? Runtime Error : "Cannot read property 'split' of undefined"

286 Views Asked by At

I'm trying to connect my postgresql database to Ionic with pg-promise.

I followed instructions in the TypeScript usage to integrate pg-promise with typescript.

When I run this on the server with 'ionic serve' I get the following errors in console :

Uncaught TypeError: Cannot read property 'split' of undefined  index.js:4 
at Object.<anonymous> (index.js:4)
at Object.<anonymous> (index.js:15)
at __webpack_require__ (bootstrap 25deb0d8315dc2a84252:54)
at Object.148 (main.js:13)
at __webpack_require__ (bootstrap 25deb0d8315dc2a84252:54)
at Object.386 (app.module.ts:61)
at __webpack_require__ (bootstrap 25deb0d8315dc2a84252:54)
at Object.336 (main.ts:5)
at __webpack_require__ (bootstrap 25deb0d8315dc2a84252:54)
at Object.317 (main.js:675)

Here are my dependencies (package.json) :

"dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/keyboard": "^4.1.0",
    "@ionic-native/native-storage": "^4.1.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "@types/node": "^8.0.25",
    "cordova-android": "^6.2.3",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-nativestorage": "^2.2.2",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.6.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "pg-promise": "^6.5.1",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
},
"devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-cordova": "1.5.0",
    "@ionic/cli-plugin-ionic-angular": "1.4.0",
    "ionic": "3.7.0",
    "@types/node": "^8.0.25",
    "typescript": "2.3.4"
}

Here is my config (tsconfig.json) :

{
    "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2016"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
    },
    "include": [
       "src/**/*.ts"
    ],
    "exclude": [
    "node_modules"
    ],
    "compileOnSave": false,
    "atom": {
    "rewriteTsconfig": false
    }
}

Here are my system info :

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.2
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Mobile 
Safari/537.36

Finally if I try to run on Android I have these following errors :

stack1

stack2

0

There are 0 best solutions below