Onsen ui + Angular 2 giving this._content_.show is not a function error
-
OS
Linux Mint 18.1Versions
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