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

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