{"action":"closed","issue":{"url":"https://api.github.com/repos/valor-software/ngx-bootstrap/issues/1778","repository_url":"https://api.github.com/repos/valor-software/ngx-bootstrap","labels_url":"https://api.github.com/repos/valor-software/ngx-bootstrap/issues/1778/labels{/name}","comments_url":"https://api.github.com/repos/valor-software/ngx-bootstrap/issues/1778/comments","events_url":"https://api.github.com/repos/valor-software/ngx-bootstrap/issues/1778/events","html_url":"https://github.com/valor-software/ngx-bootstrap/issues/1778","id":215300326,"number":1778,"title":"bs-sortable not working properly in lazy loaded modules","user":{"login":"imixtron","id":10543720,"avatar_url":"https://avatars1.githubusercontent.com/u/10543720?v=4","gravatar_id":"","url":"https://api.github.com/users/imixtron","html_url":"https://github.com/imixtron","followers_url":"https://api.github.com/users/imixtron/followers","following_url":"https://api.github.com/users/imixtron/following{/other_user}","gists_url":"https://api.github.com/users/imixtron/gists{/gist_id}","starred_url":"https://api.github.com/users/imixtron/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/imixtron/subscriptions","organizations_url":"https://api.github.com/users/imixtron/orgs","repos_url":"https://api.github.com/users/imixtron/repos","events_url":"https://api.github.com/users/imixtron/events{/privacy}","received_events_url":"https://api.github.com/users/imixtron/received_events","type":"User","site_admin":false},"labels":[{"id":525608134,"url":"https://api.github.com/repos/valor-software/ngx-bootstrap/labels/comp(sortable)","name":"comp(sortable)","color":"0e8a16","default":false},{"id":481192441,"url":"https://api.github.com/repos/valor-software/ngx-bootstrap/labels/needs:%20reproduce","name":"needs: reproduce","color":"fbca04","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-03-19T22:19:10Z","updated_at":"2017-11-09T16:21:35Z","closed_at":"2017-11-09T16:21:35Z","author_association":"NONE","body":"I have 3 modules (for now) AppModule, AdminModule, SharedModule.\r\ni have included the features i want to use from \"**ng2-bootstrap**\" inside SharedModule for example\r\n```typescript\r\nimport { AlertModule, ModalModule, SortableModule, DropdownModule, TabsModule } from 'ng2-bootstrap';\r\n@NgModule({\r\n\tdeclarations: [\r\n                ...\r\n\t\tHeaderComponent,\r\n\t],\r\n\timports: [\r\n\t\t...\r\n                AlertModule.forRoot(),\r\n\t\tModalModule.forRoot(),\r\n\t\tSortableModule.forRoot(),\r\n\t\tDropdownModule.forRoot(),\r\n\t\tTabsModule.forRoot(),\r\n\t],\r\n\texports: [\r\n                ...\r\n\t\tAlertModule,\r\n\t\tModalModule,\r\n\t\tDropdownModule,\r\n\t\tTabsModule,\r\n\t\tSortableModule,\r\n\t]\r\n})\r\n```\r\nsortable template:\r\n```html\r\n<bs-sortable\r\n        [(ngModel)]=\"levels\"\r\n\titemClass=\"list-group-item\"\r\n\titemActiveClass=\"active\"\r\n\tplaceholderItem=\"Drag here\"\r\n\tplaceholderClass=\"placeholderStyle\"\r\n\twrapperClass=\"list-group\"\r\n></bs-sortable>\r\n```\r\nwhere\r\n```typescript\r\n    \tlevels: Array<string> = [\r\n\t\t\"lorem\",\r\n\t\t\"ipsum\",\r\n\t\t\"dolor\",\r\n\t\t\"set\",\r\n\t\t\"amet\"\r\n\t];\r\n```\r\n\r\nEverything is working fine, except for the SortableModule, whenever i add `[(ngModel)]` to the selector i get the following error\r\n\r\n```error\r\nEXCEPTION: Uncaught (in promise): Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\nError: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\n    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:124253:33)\r\n    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:99136:16)\r\n    at new SyntaxError (http://localhost:4200/vendor.bundle.js:10424:16)\r\n    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:25245:19)\r\n    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:60473:68)\r\n    at http://localhost:4200/vendor.bundle.js:60356:62\r\n    at Set.forEach (native)\r\n    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:60356:19)\r\n    at createResult (http://localhost:4200/vendor.bundle.js:60238:19)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123625:26)\r\n    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:36354:37)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123624:32)\r\n    at Zone.run (http://localhost:4200/vendor.bundle.js:123421:43)\r\n    at http://localhost:4200/vendor.bundle.js:123974:57\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:123658:31)\r\n```\r\n```error\r\nEXCEPTION: Uncaught (in promise): Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\nError: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\n    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:124253:33)\r\n    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:99136:16)\r\n    at new SyntaxError (http://localhost:4200/vendor.bundle.js:10424:16)\r\n    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:25245:19)\r\n    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:60473:68)\r\n    at http://localhost:4200/vendor.bundle.js:60356:62\r\n    at Set.forEach (native)\r\n    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:60356:19)\r\n    at createResult (http://localhost:4200/vendor.bundle.js:60238:19)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123625:26)\r\n    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:36354:37)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123624:32)\r\n    at Zone.run (http://localhost:4200/vendor.bundle.js:123421:43)\r\n    at http://localhost:4200/vendor.bundle.js:123974:57\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:123658:31)\r\n```\r\n```\r\nError: Uncaught (in promise): Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\nError: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\n    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:124253:33)\r\n    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:99136:16)\r\n    at new SyntaxError (http://localhost:4200/vendor.bundle.js:10424:16)\r\n    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:25245:19)\r\n    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:60473:68)\r\n    at http://localhost:4200/vendor.bundle.js:60356:62\r\n    at Set.forEach (native)\r\n    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:60356:19)\r\n    at createResult (http://localhost:4200/vendor.bundle.js:60238:19)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123625:26)\r\n    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:36354:37)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123624:32)\r\n    at Zone.run (http://localhost:4200/vendor.bundle.js:123421:43)\r\n    at http://localhost:4200/vendor.bundle.js:123974:57\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:123658:31)\r\n    at resolvePromise (http://localhost:4200/vendor.bundle.js:123938:31) [angular]\r\n    at resolvePromise (http://localhost:4200/vendor.bundle.js:123914:17) [angular]\r\n    at http://localhost:4200/vendor.bundle.js:123974:17 [angular]\r\n    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:36345:37) [angular]\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:123657:36) [angular]\r\n    at Zone.runTask (http://localhost:4200/vendor.bundle.js:123461:47) [<root> => angular]\r\n    at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:123824:35) [<root>]\r\nErrorHandler.handleError @ error_handler.js:60\r\nnext @ application_ref.js:348\r\nschedulerFn @ async.js:93\r\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:234\r\nSafeSubscriber.next @ Subscriber.js:183\r\nSubscriber._next @ Subscriber.js:125\r\nSubscriber.next @ Subscriber.js:89\r\nSubject.next @ Subject.js:55\r\nEventEmitter.emit @ async.js:79\r\nNgZone.triggerError @ ng_zone.js:333\r\nonHandleError @ ng_zone.js:294\r\nZoneDelegate.handleError @ zone.js:334\r\nZone.runGuarded @ zone.js:142\r\n_loop_1 @ zone.js:540\r\ndrainMicroTaskQueue @ zone.js:549\r\n```\r\n```\r\nUnhandled Promise rejection: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3 ; Zone: angular ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortabl…, _nativeError: ZoneAwareError, __zone_symbol__stack: \"Error: Template parse errors:↵Can't bind to 'ngMod…http://localhost:4200/vendor.bundle.js:123658:31)\", __zone_symbol__message: \"Template parse errors:↵Can't bind to 'ngModel' sin…ctiveClass=\"active\"↵\"): HierarchiesComponent@20:3\"} Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'bs-sortable'.\r\n1. If 'bs-sortable' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'bs-sortable' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"\r\n\t\t<div class=\"col-xs-12\">\r\n\t\t\t<bs-sortable\r\n\t\t\t[ERROR ->][ngModel]=\"levels\"\r\n\t\t\t\titemClass=\"list-group-item\"\r\n\t\t\t\titemActiveClass=\"active\"\r\n\"): HierarchiesComponent@20:3\r\n    at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:124253:33)\r\n    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:99136:16)\r\n    at new SyntaxError (http://localhost:4200/vendor.bundle.js:10424:16)\r\n    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:25245:19)\r\n    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:60473:68)\r\n    at http://localhost:4200/vendor.bundle.js:60356:62\r\n    at Set.forEach (native)\r\n    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:60356:19)\r\n    at createResult (http://localhost:4200/vendor.bundle.js:60238:19)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123625:26)\r\n    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:36354:37)\r\n    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:123624:32)\r\n    at Zone.run (http://localhost:4200/vendor.bundle.js:123421:43)\r\n    at http://localhost:4200/vendor.bundle.js:123974:57\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:123658:31)\r\n```\r\n\r\nalso note that in non-lazy modules it is working perfectly fine. but in lazyLoaded modules with sharedModule it gives this exact error in this case `HierarchiesComponent` withing `AdminModule`. If i dont add `[(ngModel)]` the template is parsed as it should be, given as follows:\r\n\r\n```Html\r\n<bs-sortable _ngcontent-qrg-28=\"\" itemactiveclass=\"active\" itemclass=\"list-group-item\" placeholderclass=\"placeholderStyle\" placeholderitem=\"Drag here\" wrapperclass=\"list-group\" ng-reflect-wrapper-class=\"list-group\" ng-reflect-item-class=\"list-group-item\" ng-reflect-item-active-class=\"active\" ng-reflect-placeholder-class=\"placeholderStyle\" ng-reflect-placeholder-item=\"Drag here\">\r\n<div ng-reflect-ng-class=\"list-group\" class=\"list-group\" ng-reflect-ng-style=\"[object Object]\">\r\n  <!--template bindings={\r\n  \"ng-reflect-ng-if\": null\r\n}-->\r\n    <!--template bindings={\r\n  \"ng-reflect-ng-for-of\": null\r\n}-->\r\n</div>\r\n\r\n<!--template bindings={}-->  \r\n</bs-sortable>\r\n```"}}
{"actor":{"display_login":"imixtron"}}