Question T3035
Visible to All Users

Survey Creator Knockout Errors in Angular 8 Project

created 5 years ago (modified 5 years ago)

Hello,

After following the installation guide at https://github.com/surveyjs/surveyjs_angular_cli
I had various errors with CKEditor dependency ('dir' undefined, 'config.js' not found - 404, and many moreā€¦). Also, the 'ckeditor' package is deprecated. Can you possibly update to 'ckeditor4' or 'ckeditor4-angular' ? The only workaround for the too many CKEditor errors I found is to add the cdn link into the head of the page in the 'index.html' file.

Most importantly, I have unresolvable issues with knockout. When I load the survey creator onto my webpage, there is no issue. However,
when I first click on an element of the toolbox, i got the following stack trace:

Code
ERROR TypeError: Unable to process binding "template: function(){return { name:'objecteditorproperty',afterRender:$parent.koAfterRender} }" Message: Unable to process binding "template: function(){return { name:'propertyeditor-'+ editorTypeTemplate,data:$data.editor} }" Message: Unable to process binding "template: function(){return { name:'propertyeditor-modal',data:$data} }" Message: Unable to process binding "template: function(){return { name:'propertyeditor-modalcontent',data:$data} }" Message: Unable to process binding "template: function(){return { name:'propertyeditorcontent-'+ editorTypeTemplate,data:$data,afterRender:$data.koAfterRender} }" Message: Unable to process binding "if: function(){return $parent.hasAceEditor }" Message: ace.require is not a function at SurveyPropertyConditionEditor.get [as hasAceEditor] (survey-creator.js:5960) at if (eval at parseBindingsString (knockout-latest.js:74), <anonymous>:1:70) at a.o.l (knockout-latest.js:104) at Function.yd (knockout-latest.js:55) at Function.zd (knockout-latest.js:55) at Function.ha (knockout-latest.js:54) at Object.a.o.a.$ (knockout-latest.js:52) at init (knockout-latest.js:104) at knockout-latest.js:79 at Object.G (knockout-latest.js:41)

When I then click on another element of the toolbox or any other button (except the Save button which is all fine), I then get the following error each time :

Code
core.js:6014 ERROR TypeError: Cannot read property 'length' of undefined at Object.Ua (knockout-latest.js:14) at a.a.ec (knockout-latest.js:135) at Object.G (knockout-latest.js:41) at x (knockout-latest.js:127) at a.ic.lc (knockout-latest.js:129) at Function.notifySubscribers (knockout-latest.js:38) at a.ic.c [as lc] (knockout-latest.js:48) at Function.notifySubscribers (knockout-latest.js:38) at Function.xa (knockout-latest.js:43) at SurveyObjectEditor.c [as koProperties] (knockout-latest.js:42)

Despite these errors, the Survey Creator seems to be working correctly.

Thank you in advance.

Comments (2)

    Hello,

    We have a live sample with CK Editor on our site - https://surveyjs.io/Examples/Survey-Creator/?id=ckeditorpropertyeditor&theme=bootstrap
    It works ok for me. Probably not all required by CK Editor scripts are included in to your application.
    If this doesn't help please provide us with a sample illustrating the issue.

    Thanks, Serge
    SurveyJS Team

    Q Q
    qfgdhfnbdxgbfgjgwsegwshd 5 years ago

      Hello,

      I tried adding the scripts in the head of my index.html file as in your example. That does not fixes any issue for me.

      Therefore, I created a minimalist project strictly following the README.md installation guide at https://github.com/surveyjs/surveyjs_angular_cli.
      After installing the dependencies and launching the server, you will be able to see the different errors I am facing.

      I hope it will help you finding the causes of my issues.

      Answers approved by surveyjs Support

      created 5 years ago

      Hello,

      Thank you for the sample you've provided.

      I've investigated the issue.

      First of all I've got the following error:
      Clipboard-File-1.png

      Then I've searched for the "ckeditor zone angular cannot set property dir of undefined" error over the web.
      I've found the following issue:
      https://github.com/ckeditor/ckeditor4/issues/508
      And mention that some "baseDir" should be set in order to CKEditor can load it's additional scripts, styles and plugins

      After that I tried to find the "ckeditor in angular application" over the web, and found the following SO post:
      https://stackoverflow.com/questions/48751957/how-to-implement-ckeditor-in-angular-app/50218611

      As was told in SO thread, I've added the following code to the angular.json file:

      JSON
      { "glob": "**/*", "input": "node_modules/ckeditor/plugins", "output": "plugins/" }, { "glob": "**/*", "input": "node_modules/ckeditor/", "output": "assets/js/ckeditor/" }

      and this line to the main.ts file:

      JavaScript
      window["CKEDITOR"].basePath = '/assets/js/ckeditor/';

      And after that CKEditor finally become visible.

      I thing the question mostly not is related to SurveyJS code but how to integrate pure CKEditor into an Angular application.

      Probably another "brute force" solution is to add all missing CKEditor scripts/CSS files into the angular.json file.

      Thanks, Serge
      SurveyJS team