(Custom) Widget (sortablejs) doesn't work (mostly)

[MartinLichtblau]

Using widgets is a pain using angular2, both with the widgets library and custom widgets. At least for me trying to integrate sortablejs and barrating. I looked into all examples and found that creating a custom widget gives you more control, yet this doesn't work either.

Why is this error happening only on first load and disappears after reloading (F5) and then successfully showing sortablelist? Error: Cannot find template with ID survey-widget-sortablelist Full Error Log:

Message: Unable to process binding "if: function(){return koCurrentPage }"
Message: Unable to process binding "template: function(){return { name:'survey-page',data:koCurrentPage,afterRender:koAfterRenderPage} }"
Message: Unable to process binding "template: function(){return { name:'survey-rows',data:$data} }"
Message: Unable to process binding "foreach: function(){return { data:rows,as:'row'} }"
Message: Unable to process binding "if: function(){return row.visible }"
Message: Unable to process binding "foreach: function(){return { data:row.elements,as:'question',afterRender:row.koAfterRender} }"
Message: Unable to process binding "if: function(){return question.isVisible }"
Message: Unable to process binding "template: function(){return { name:question.koElementType,data:question,afterRender:$parent.koElementAfterRender} }"
Message: Unable to process binding "template: function(){return { name:question.koTemplateName(),data:question,afterRender:question.koQuestionAfterRender} }"
Message: Cannot find template with ID survey-widget-sortablelist ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError Error: Error in :0:0 caused by: Unable to process binding "if: function(){return koState() =="running" }"
Message: Unable to process binding "if: function(){return koCurrentPage }"
Message: Unable to process binding "template: function(){return { name:'survey-page',data:koCurrentPage,afterRender:koAfterRenderPage} }"
Message: Unable to process binding "template: function(){return { name:'survey-rows',data:$data} }"
Message: Unable to process binding "foreach: function(){return { data:rows,as:'row'} }"
Message: Unable to process binding "if: function(){return row.visible }"
Message: Unable to process binding "foreach: function(){return { data:row.elements,as:'question',afterRender:row.koAfterRender} }"
Message: Unable to process binding "if: function(){return question.isVisible }"
Message: Unable to process binding "template: function(){return { name:question.koElementType,data:question,afterRender:$parent.koElementAfterRender} }"
Message: Unable to process binding "template: function(){return { name:question.koTemplateName(),data:question,afterRender:question.koQuestionAfterRender} }"
Message: Cannot find template with ID survey-widget-sortablelist
    at ViewWrappedError.ZoneAwareError (http://127.0.0.1:5200/static/node_modules/zone.js/dist/zone.js:992:33)
    at ViewWrappedError.BaseError [as constructor] (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:6167:20)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:12385:27)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:12358:22)
    at ViewRef_.detectChanges (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:9377:24)
    at RouterOutlet.activate (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:5058:46)
    at ActivateRoutes.placeComponentIntoOutlet (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4337:20)
    at ActivateRoutes.activateRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4304:30)
    at eval (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:62)
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:33)
    at ActivateRoutes.activateRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4287:26)
    at eval (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:62)

Of course I prefer to use the widgets library. But with it no widgets shows up and no error is thrown; so it's impossible to get it to work.

[tsv2013]

Have you seen this repo - https://github.com/surveyjs/surveyjs_angular_cli ? It demonstrates custom widgets integration with Angular 2+