TypeError: Picture_1.Picture is not a constructor

Ionic Framework ionic-v3
1

Hi there,

Its been a while since I touched the app I was developing. Now I started with it again, I’ve updated the app to beta 11. But since the update I have a weird problem where I can not find a solution for

All I do is the following when I get the error. Its when I am in the .then() of when I am using the image picker plugin.

let picture = new Picture(); // <== Causes the error

openAlbums = (): void => {
    this.plugins.albums.open().then((imgUrls) => {
        imgUrls.forEach((url: string): void => {
            let picture = new Picture();
            picture.url = url;
            picture.thumbnail = url;
            this.collection.pictures.push(picture);
        });
        this.data.current.set(this.collection);
    });
}

image
Screen Shot 2016-08-13 at 12.01.15.png1496×920 197 KB

Anyone had this problem before? Help would be appreciated.

Ionic info

Your system information:

Cordova CLI: 6.3.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3.1 Build version 7D1014

Package.json

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/http": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "1.3.10",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-jwt": "^0.1.18",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "tslint-ionic-rules": "^0.0.3",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android",
    "ios",
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    },
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "a secret",
  "description": "a secret as well"
}

See here for similar problem.

2

Sigh. I’ve taken a look in to app.bundle.js and messed around a bit. My explanation:

So I am using typescript so it bundles everything to app.bundle.js. While looking around in that I saw the following.

A working PictureCollection model was required like this.

var picture_collection_1 = require('../../models/picture-collection');

My Picture model that wasn’t working was required like this.

var Picture_1 = require('../../models/Picture');

So I tried to look for the differences by loggin them

console.log('collection', picture_collection_1);
console.log('picture', Picture_1);

which logged the picture without a constructor function

image
Screen Shot 2016-08-13 at 14.18.18.png1516×216 32 KB

I also noticed that the Picture_1 was capitalized and picture_collection_1 was not. So I looked to my import in the .ts file. It was capitalized.

import {Picture} from '../../models/Picture';

So I changed it to

import {Picture} from '../../models/picture';

and it worked again. Thats because my file is called picture.ts and not Picture.ts




… sometimes I hate programming …

1 Like