Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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