Data-binding error: Attempted to assign readonly property error

Ionic Framework ionic-v3
1

Running into a strange error when updating a property assigned in the constructor on iOS builds.

4     309157   error    EXCEPTION: TypeError: Attempted to assign to readonly property. in [groups in SchedulePage@10:20]
5     309159   error    ORIGINAL EXCEPTION: TypeError: Attempted to assign to readonly property.
6     309161   error    ORIGINAL STACKTRACE:
7     309170   error    _reset@http://192.168.1.2:8100/build/js/app.bundle.js:17955:23
check@http://192.168.1.2:8100/build/js/app.bundle.js:17879:20
diff@http://192.168.1.2:8100/build/js/app.bundle.js:17868:23
ngDoCheck@http://192.168.1.2:8100/build/js/app.bundle.js:4854:44
detectChangesInRecordsInternal
detectChangesInRecords@http://192.168.1.2:8100/build/js/app.bundle.js:16258:48
runDetectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16235:36
_detectChangesInViewChildren@http://192.168.1.2:8100/build/js/app.bundle.js:16335:34
runDetectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16239:42
_detectChangesContentChildren@http://192.168.1.2:8100/build/js/app.bundle.js:16328:34
runDetectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16236:43
_detectChangesInViewChildren@http://192.168.1.2:8100/build/js/app.bundle.js:16335:34
runDetectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16239:42
_detectChangesInViewChildren@http://192.168.1.2:8100/build/js/app.bundle.js:16335:34
runDetectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16239:42
detectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:16224:89
detectChanges@http://192.168.1.2:8100/build/js/app.bundle.js:17125:86
http://192.168.1.2:8100/build/js/app.bundle.js:16052:97
forEach@[native code]
tick@http://192.168.1.2:8100/build/js/app.bundle.js:16052:45
http://192.168.1.2:8100/build/js/app.bundle.js:15969:133
invoke@http://192.168.1.2:8100/build/js/angular2-polyfills.js:390:34
onInvoke@http://192.168.1.2:8100/build/js/app.bundle.js:30474:47
invoke@http://192.168.1.2:8100/build/js/angular2-polyfills.js:389:43
runGuarded@http://192.168.1.2:8100/build/js/angular2-polyfills.js:297:54
runInner@http://192.168.1.2:8100/build/js/app.bundle.js:30505:81
run@http://192.168.1.2:8100/build/js/app.bundle.js:30412:74
http://192.168.1.2:8100/build/js/app.bundle.js:15969:108
http://192.168.1.2:8100/build/js/app.bundle.js:30635:56
__tryOrUnsub@http://192.168.1.2:8100/build/js/app.bundle.js:73238:20
next@http://192.168.1.2:8100/build/js/app.bundle.js:73187:34
_next@http://192.168.1.2:8100/build/js/app.bundle.js:73146:30
next@http://192.168.1.2:8100/build/js/app.bundle.js:73123:23
_finalNext@http://192.168.1.2:8100/build/js/app.bundle.js:72998:34
_next@http://192.168.1.2:8100/build/js/app.bundle.js:72990:28
next@http://192.168.1.2:8100/build/js/app.bundle.js:72947:19
emit@http://192.168.1.2:8100/build/js/app.bundle.js:30624:80
_checkStable@http://192.168.1.2:8100/build/js/app.bundle.js:30332:48
setMicrotask@http://192.168.1.2:8100/build/js/app.bundle.js:30308:35
onHasTask@http://192.168.1.2:8100/build/js/app.bundle.js:30486:47
hasTask@http://192.168.1.2:8100/build/js/angular2-polyfills.js:449:65
_updateTaskCount@http://192.168.1.2:8100/build/js/angular2-polyfills.js:466:34
invokeTask@http://192.168.1.2:8100/build/js/angular2-polyfills.js:427:43
runTask@http://192.168.1.2:8100/build/js/angular2-polyfills.js:320:58
drainMicroTaskQueue@http://192.168.1.2:8100/build/js/angular2-polyfills.js:541:43
g@http://192.168.1.2:8100/build/js/es6-shim.min.js:11:1947
http://192.168.1.2:8100/build/js/es6-shim.min.js:11:1877
promiseReactionJob@[native code]
8     309174   error    ERROR CONTEXT:

From the error output, it seems to be an issue with Angular re-assigning the new data to the view.

The this.groups property contains a number of objects, which are iterated in the HTML template by:

<ion-item-group *ngFor="#group of groups">

On initialisation it works once, then upon re-assignment it fails. Small extract of code:

constructor(platform, app, nav, db, user) {
    this.platform = platform;
    this.app = app;
    this.nav = nav;
    this.db = db;
    this.groups = [];

    this.updateSchedule();
  }

updateSchedule() {

    //When platform ready
    this.platform.ready().then(() => {

      //If not data is already loaded
      if (!(this.groups.length > 0)) {

        //Present the component
          this.scheduleController.fetchSchedule().then(data => {
            this.groups = data;
            this.shownSessions = data.length;
        });
      }
    });
  }

I see that this has been raised many times for Ionic 1:

and recently for Ionic 2:

The solutions for Ionic 1 are a bit vague, and don’t seem to apply or map to Angular 2 implementations. I would very much appreciate any suggestions with this, as it is currently breaking our production build on iOS, which are the majority of our user base.

Thanks!

2

Just to cover all bases I wanted to ensure I was running latest CLIs etc.
Environment at time of post:

Cordova CLI: 6.0.0
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.0
Xcode version: Xcode 7.3.1 Build version 7D1014
3

Strangely enough I seemed to have fixed the issue by running a number of updates.
I’m not sure which fixed the issue, but I did the following.

Updated Cordova to latest version:
sudo npm install -g cordova

Updated Ionic builds:
npm install -g ionic@beta

Remove ios and android platforms
ionic platform remove ios
ionic platform remove android

Add in iOS and Android platforms
ionic platform add ios
ionic platform add android

Works!

4

I’m back. Seems to not be working anymore, despite not changing any code, dependencies etc. I can’t figure it out. It seems to only happen on the first launch of the app.

App presents the data and if refreshed again, says that cannot assign to a readonly this.groups.

5

Hi, did you manage to resolve this issue? I am also getting this error :frowning:

6

Same error here … only on iOS

7

@ionicchaser & @divyekhanna I cannot recall if I resolved this or not. I know that after this post I made a number of changes to the app, along with updating to the latest dependencies etc which looked like this:

{
  "name": "TDCBNE16",
  "description": "The Design Conference Brisbane 2016 Hybrid App",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "es6-shim": "0.35.0",
    "ionic-angular": "^2.0.0-beta.7",
    "ionic-native": "^1.1.1",
    "ionicons": "3.0.0",
    "ng2-cordova-oauth": "0.0.4",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-es2015": "^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",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen",
    "cordova-plugin-inappbrowser",
    "cordova-plugin-network-information",
    "de.appplant.cordova.plugin.local-notification"
  ],
  "cordovaPlatforms": [
    "ios",
    "android"
  ]
}

Sorry I can’t be of more help.

8

I also had the same error after I updating to ionic2, angular, cordova cli, and ionic2 cli. I don’t know which one or why cause the problem.

Here is my ionic info:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9-201606271842
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.1 LTS
Node Version: v5.12.0

{
“dependencies”: {
"@angular/common": “^2.0.0-rc.4”,
"@angular/compiler": “^2.0.0-rc.4”,
"@angular/core": “^2.0.0-rc.4”,
"@angular/forms": “^0.2.0”,
"@angular/http": “^2.0.0-rc.4”,
"@angular/platform-browser": “^2.0.0-rc.4”,
"@angular/platform-browser-dynamic": “^2.0.0-rc.4”,
"@angular/router": “^2.0.0-rc.2”,
“angular2-moment”: “^0.8.0”,
“cordova”: “^6.2.0”,
“es6-shim”: “^0.35.0”,
“ionic-angular”: “^2.0.0-beta.11”,
“ionic-native”: “^1.2.4”,
“ionicons”: “^3.0.0”,
“lodash”: “^4.12.0”,
“reflect-metadata”: “^0.1.3”,
“rxjs”: “^5.0.0-beta.6”,
“typescript-collections”: “^1.1.2”,
“zone.js”: “^0.6.12”
},

BTW, ionic2 is extremely slow compared with native app, ionic2 app is even slower than my ionic1 app, even after using wkwebview.

I am in pain after switching to ionic2… I really hope ionic2 team will fix all problems.