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

paul-thomas0

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

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