TypeError: Picture_1.Picture is not a constructor

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;

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 


  "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": [
  "cordovaPlatforms": [
      "platform": "android",
      "version": "",
      "locator": "android"
      "platform": "ios",
      "version": "",
      "locator": "ios"
  "name": "a secret",
  "description": "a secret as well"

See here for similar problem.

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

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