Onsen ui + Angular 2 giving this._content_.show is not a function error



  • OS
    Linux Mint 18.1

    Versions

    angular-cli: 1.0.0-beta.24
    node: 7.4.0
    os: linux x64
    @angular/common: 2.4.3
    @angular/compiler: 2.4.3
    @angular/core: 2.4.3
    @angular/forms: 2.4.3
    @angular/http: 2.4.3
    @angular/platform-browser: 2.4.3
    @angular/platform-browser-dynamic: 2.4.3
    @angular/router: 3.4.3
    @angular/compiler-cli: 2.4.3
    

    Repro steps
    This application was created using angular-cli and later on angular2-onsenui: 1.0.0-rc.3 and onsenui: 2.0.5 was installed here is the package.json.

    {
      "name": "GHS-TANISHQ",
      "version": "0.0.0",
      "license": "MIT",
      "angular-cli": {},
      "scripts": {
        "start": "ng serve",
        "lint": "tslint \"src/**/*.ts\"",
        "test": "ng test",
        "pree2e": "webdriver-manager update --standalone false --gecko false",
        "e2e": "protractor"
      },
      "private": true,
      "dependencies": {
        "@angular/common": "^2.4.1",
        "@angular/compiler": "^2.4.1",
        "@angular/core": "^2.4.1",
        "@angular/forms": "^2.4.1",
        "@angular/http": "^2.4.1",
        "@angular/platform-browser": "^2.4.1",
        "@angular/platform-browser-dynamic": "^2.4.1",
        "@angular/router": "^3.4.1",
        "angular2-onsenui": "^1.0.0-rc.3",
        "core-js": "^2.4.1",
        "onsenui": "^2.0.5",
        "rxjs": "^5.0.2",
        "ts-helpers": "^1.1.2",
        "zone.js": "^0.7.4"
      },
      "devDependencies": {
        "@angular/compiler-cli": "^2.4.1",
        "@types/jasmine": "2.5.40",
        "@types/node": "^6.0.56",
        "angular-cli": "1.0.0-beta.24",
        "codelyzer": "~2.0.0-beta.4",
        "jasmine-core": "2.5.2",
        "jasmine-spec-reporter": "3.0.0",
        "karma": "1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.1.0",
        "karma-remap-istanbul": "^0.4.0",
        "protractor": "~4.0.14",
        "ts-node": "2.0.0",
        "tslint": "^4.2.0",
        "typescript": "~2.0.3"
      }
    }
    

    I wanted to implement onsen-ui ons-splitter tag as in https://onsen.io/v2/docs/angular2/ons-splitter-content.html in this angular application. Running that application raised an error which was resolved from the issue #3975 of core angular-cli node module in github, in which case the error went away the moment I changed the version to zone.js@0.7.4. However, doing that gave a new error which had the following stack trace. I can’t figure out the origin of the error.

    EXCEPTION: this._content._show is not a function
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    data.args.(anonymous function) @ zone.js:1224
    (anonymous) @ setImmediate.js:48
    runIfPresent @ setImmediate.js:67
    onGlobalMessage @ setImmediate.js:113
    error_handler.js:55 ORIGINAL STACKTRACE:
    ErrorHandler.handleError @ error_handler.js:55
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    data.args.(anonymous function) @ zone.js:1224
    (anonymous) @ setImmediate.js:48
    runIfPresent @ setImmediate.js:67
    onGlobalMessage @ setImmediate.js:113
    error_handler.js:56 TypeError: this._content._show is not a function
    at HTMLElement._show (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :23221:21)
    at eval (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :23210:27)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:111568:35)
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:32533:37)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:111567:40)
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:111444:47)
    at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:111638:33)
    at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:112517:25)
    at eval (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3341:25)
    at runIfPresent (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3360:21)
    at onGlobalMessage (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3406:17)
    ErrorHandler.handleError @ error_handler.js:56
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    data.args.(anonymous function) @ zone.js:1224
    (anonymous) @ setImmediate.js:48
    runIfPresent @ setImmediate.js:67
    onGlobalMessage @ setImmediate.js:113
    Subscriber.js:227 Uncaught TypeError: this._content._show is not a function
    at HTMLElement._show (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :23221:21)
    at eval (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :23210:27)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:111568:35)
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:32533:37)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:111567:40)
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:111444:47)
    at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:111638:33)
    at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:112517:25)
    at eval (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3341:25)
    at runIfPresent (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3360:21)
    at onGlobalMessage (eval at module.exports (http://localhost:4200/scripts.bundle.js:14:8), :3406:17)
    _show @ ons-splitter-content.js:190
    (anonymous) @ ons-splitter-content.js:181
    ZoneDelegate.invokeTask @ zone.js:275
    onInvokeTask @ ng_zone.js:260
    ZoneDelegate.invokeTask @ zone.js:274
    Zone.runTask @ zone.js:151
    ZoneTask.invoke @ zone.js:345
    data.args.(anonymous function) @ zone.js:1224
    (anonymous) @ setImmediate.js:48
    runIfPresent @ setImmediate.js:67
    onGlobalMessage @ setImmediate.js:113
    

Log in to reply