TypeError: Object(…) is not a function at index.js

Question

I am new to ionic, I have updated my code from angular 4.4 to angular 7

Here is the package.json

{
  "name": "mobile",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "7.1.1",
    "@angular/compiler": "7.1.1",
    "@angular/core": "^7.1.1",
    "@angular/forms": "7.1.1",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "7.1.1",
    "@angular/platform-browser-dynamic": "7.1.1",
    "@angular/router": "7.1.1",
    "@auth0/angular-jwt": "^3.0.1",
    "@ionic-native/app-version": "^4.20.0",
    "@ionic-native/camera": "^4.20.0",
    "@ionic-native/core": "^5.21.6",
    "@ionic-native/crop": "^4.20.0",
    "@ionic-native/device": "^4.20.0",
    "@ionic-native/file": "^4.20.0",
    "@ionic-native/file-opener": "^4.20.0",
    "@ionic-native/image-resizer": "^4.20.0",
    "@ionic-native/network": "^4.20.0",
    "@ionic-native/push": "^4.20.0",
    "@ionic-native/screen-orientation": "^5.21.6",
    "@ionic-native/splash-screen": "^4.20.0",
    "@ionic-native/status-bar": "^5.21.6",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^12.1.1",
    "angular-oauth2-oidc-codeflow": "^4.0.1",
    "angular2-signaturepad": "^2.11.0",
    "angular2-virtual-scroll": "^0.4.16",
    "blob-util": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-support-google-services": "1.2.0",
    "core-js": "^3.6.4",
    "ionic-angular": "^3.8.0",
    "ionicons": "3.0.0",
    "ng2-img-cropper": "^0.9.0",
    "ng2-pica": "^1.2.12",
    "pouchdb": "^7.2.1",
    "pouchdb-adapter-cordova-sqlite": "^2.0.7",
    "pouchdb-find": "^7.2.1",
    "pouchdb-utils": "^7.2.1",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.5.4",
    "rxjs-tslint": "^0.1.7",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "7.1.1",
    "@ionic-native/keyboard": "^5.21.6",
    "@ionic/app-scripts": "^3.1.11",
    "@types/jasmine": "3.5.7",
    "@types/node": "^13.7.4",
    "angular-cli": "1.0.0-beta.28.3",
    "angular2-moment": "^1.9.0",
    "codelyzer": "~5.2.1",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-jasmine": "^3.1.1",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.4.3",
    "ts-node": "8.6.2",
    "tslint": "^6.0.0",
    "typescript": "^3.7.5"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-file": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "Take photo for user's avatar",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "Use photo for user's avatar"
      },
      "cordova-plugin-crop": {},
      "cordova-plugin-device": {},
      "cordova-plugin-file-opener2": {},
      "info.protonet.imageresizer": {},
      "phonegap-plugin-push": {
        "locator": "phonegap-plugin-push",
        "SENDER_ID": "70660752"
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-screen-orientation": {}
    }
  }
}

After i deleted node_modules and package-lock.json and did npm install to install all the latest dependency.

After when i try to run the project it shows this error Object(...) is not a function it is very difficult to identify the mistake where exactly is ?

Can any one help me to find mistake..

Thank you in advance!!

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr"  >
<head>
  <meta charset="UTF-8">
  <title>Detention Prevention</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- The polyfills js is generated during the build process -->
  <!-- Pollyfills MUST BE before cordova : https://github.com/ionic-team/ionic-native/issues/505 -->
  <script src="build/polyfills.js"></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- load custom JS -->
  <script src="custom-polyfills.js"></script>
  <script src="service-worker-loader.js"></script>

  <link href="build/main.css" rel="stylesheet">

</head>
<body class="background-under" >
  <!-- <ion-content class="page-account-type background-under no-bounce"> -->
    <img class="background-top" src="assets/img/bg-crop.jpg" alt="Login" width="100%" />
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

What does your main.ts look like?

ShamPooSham
– ShamPooSham

2020-02-26 06:49:26 +00:00
Commented Feb 26, 2020 at 6:49 — ShamPooSham
– ShamPooSham, Commented Feb 26, 2020 at 6:49
can you post the index.js file

Khanh Le Tran
– Khanh Le Tran

2020-02-26 07:02:39 +00:00
Commented Feb 26, 2020 at 7:02 — Khanh Le Tran
– Khanh Le Tran, Commented Feb 26, 2020 at 7:02
I have posted main.ts and index.html

Krunal Lathia
– Krunal Lathia

2020-02-26 11:20:20 +00:00
Commented Feb 26, 2020 at 11:20 — Krunal Lathia
– Krunal Lathia, Commented Feb 26, 2020 at 11:20

CompWitch · Accepted Answer · 2020-09-17 16:30:18Z

1

I was having the same problem, even though I was doing what the docs said. I finally got it to work after removing the plugin, and platform and then following this tutorial. https://www.freakyjolly.com/ionic-storage-tutorial-in-ionic-using-native-storage-plugin/

good luck!

edit in case link dies:

step 1: after starting new project or in the existing projects directory

$ ionic cordova plugin add cordova-plugin-nativestorage
$ npm install @ionic-native/native-storage

step 2: add to the app.module.ts file at the top and in the providers

import { NativeStorage } from '@ionic-native/native-storage/ngx';

providers: [
StatusBar,
SplashScreen,
NativeStorage,

step 3: add it to the page you want to use it on ex: home.page.ts

import { Component } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

@Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
})
export class HomePage {

constructor(
   private nativeStorage: NativeStorage
) {
}

step 4: add functions and test

this.nativeStorage.setItem('freakyItem1', { property: 'value', anotherProperty: 'anotherValue' })
  .then(
    (data) => console.log('Stored first item!',data),
    error => console.error('Error storing item', error)
  );

I'm not sure why, but I tried all that before and it didn't work, but when I added it like this, it worked great.

edited Sep 17, 2020 at 16:30

answered Sep 16, 2020 at 14:40

CompWitch

441 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

quicklikerabbit Over a year ago

Can you include the relevant parts from that link in your answer? If that link breaks your answer will lose it's value.

CompWitch Over a year ago

smart, didn't think about that!

Vikas Rathor · Accepted Answer · 2020-02-26 11:27:28Z

0

Please check the dependency

https://github.com/angular/angular/blob/master/CHANGELOG.md#600-2018-05-03

May be it will help you to fix this issue

answered Feb 26, 2020 at 11:27

Vikas Rathor

339 bronze badges

Collectives™ on Stack Overflow

TypeError: Object(…) is not a function at index.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related