search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.02k stars 785 forks source link

Angular crashes on first website when adding Radio Group #7986

Closed BretterThanYou closed 3 months ago

BretterThanYou commented 3 months ago

Are you requesting a feature, reporting a bug or asking a question?

I'm reporting a bug.

What is the current behavior?

The ng serve server crashes and the webpage says "This site can't be found" once I navigate to the website.

What is the expected behavior?

A fillable HTML form is displayed.

How would you reproduce the current behavior (if this is a bug)?

Clone the linked repo and switch to the Bug_Report_One branch. Install dependencies (as you would for any Angular project), and run ng serve on the cli. Open the website in your browser. The ng serve cli will then crash, and the website displays a "This site can't be reached" error.

Provide the test code and the tested page URL (if applicable)

Tested page URL: http://localhost:4200/

Test code

This commit change causes the issue: https://github.com/BretterThanYou/Survey/commit/8fa44c008136de04a16c62aa38f51a1780d07b4a This is the broken code: https://github.com/BretterThanYou/Survey/tree/Bug_Report_One This code works: https://github.com/BretterThanYou/Survey/tree/main

Specify your

JaneSjs commented 3 months ago

Hello, Thank you for sharing this demo.

I got the following exception on my end:

ERROR Error: NotYetImplemented
    at VERSION (d:/examples/Survey/node_modules/@angular/platform-server/fesm2022/platform-server.mjs:347:13)
    at SvgBundleComponent.ngOnInit (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6959:37)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5163:13)
    at callHooks (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12351:21)
    at detectChangesInView$1 (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12560:9)
    at detectChangesInViewIfAttached (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12523:5)
    at detectChangesInEmbeddedViews (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12480:13)
ERROR Error: NotYetImplemented
    at VERSION (d:/examples/Survey/node_modules/@angular/platform-server/fesm2022/platform-server.mjs:347:13)
    at SvgBundleComponent.ngOnInit (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6959:37)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5163:13)
    at callHooks (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12351:21)
    at detectChangesInView$1 (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12560:9)
    at detectChangesInViewIfAttached (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12523:5)
    at detectChangesInEmbeddedViews (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12480:13)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngOnInit (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8434:10)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngOnInit (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8434:10)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngDoCheck (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6343:12)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngDoCheck (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6343:12)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngDoCheck (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6343:12)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
ERROR ReferenceError: window is not defined
    at PopupDropdownViewModel2../src/popup-dropdown-view-model.ts.PopupDropdownViewModel2.updateOnHiding (d:/examples/Survey/node_modules/survey-core/survey.core.js:25676:9)
    at onIsVisibleChangedHandler (d:/examples/Survey/node_modules/survey-core/survey.core.js:26451:23)
    at PopupDropdownViewModel2../src/popup-view-model.ts.PopupBaseViewModel2.setupModel (d:/examples/Survey/node_modules/survey-core/survey.core.js:26456:9)
    at PopupDropdownViewModel2.set (d:/examples/Survey/node_modules/survey-core/survey.core.js:26463:18)
    at PopupDropdownViewModel2.PopupBaseViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26382:15)
    at PopupDropdownViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:25501:28)
    at createPopupViewModel2 (d:/examples/Survey/node_modules/survey-core/survey.core.js:26321:16)
    at PopupComponent.onModelChanged (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8424:18)
    at PopupComponent.ngDoCheck (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:6343:12)
    at callHookInternal (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
d:/examples/Survey/node_modules/zone.js/fesm2015/zone-node.js:178
                        throw error;
                        ^

TypeError: Cannot read properties of undefined (reading 'resetComponentElement')
    at PopupComponent.ngOnDestroy (d:/examples/Survey/node_modules/survey-angular-ui/fesm2015/survey-angular-ui.js:8437:16)
    at executeOnDestroys (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:9960:32)
    at cleanUpView (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:9863:9)
    at destroyViewTree (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:9691:21)
    at destroyLView (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:9836:9)
    at ViewRef$1.destroy (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:12672:9)
    at eval (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:31493:56)
    at Array.forEach (<anonymous>)
    at _ApplicationRef.ngOnDestroy (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:31493:33)
    at R3Injector.destroy (d:/examples/Survey/node_modules/@angular/core/fesm2022/core.mjs:3003:25)

I'll reach out to our developers for further details on this issue. Please stay tuned.

JaneSjs commented 3 months ago

Hello @BretterThanYou, Thank you for your patience. I discussed this issue with our developers. SurveyJS Form Library for React uses Agular component which may not be rendered on the server-side. To fix the issue, disable the server-side rendering for your survey Angular component. I created a corresponding PR which fixes the issue: https://github.com/BretterThanYou/Survey/pull/1. app.component.html

<survey [model]="surveyModel" *ngIf="isBrowser"></survey>

app.component.ts

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Model } from "survey-core";

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Please Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  },
  {
    "type": "radiogroup",
    "name": "car",
    "title": "Which is the brand of your car?",
    "isRequired": true,
    "showNoneItem": true,
    "showOtherItem": true,
    "colCount": 1,
    "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota" ],
    "separateSpecialChoices": true,
    "showClearButton": true
  }]
};

const survey = new Model(surveyJson);
survey.onComplete.add(function (sender, options) {
  // Display the "Saving..." message (pass a string value to display a custom message)
  options.showSaveInProgress();
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "databaselink");
  xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  xhr.onload = xhr.onerror = function () {
    if (xhr.status == 200) {
      // Display the "Success" message (pass a string value to display a custom message)
      options.showSaveSuccess();
      // Alternatively, you can clear all messages:
      // options.clearSaveMessages();
    } else {
      // Display the "Error" message (pass a string value to display a custom message)
      options.showSaveError();
    }
  };
  xhr.send(JSON.stringify(sender.data));
});

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  title = 'survey-app';
  surveyModel: any;
  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object){
    this.isBrowser  = isPlatformBrowser(this.platformId);

  }
  ngOnInit() {
    const survey = new Model(surveyJson);
    this.surveyModel = survey;
  }
}

image

Please feel free to reactivate this thread if you have any further questions.

Thanks

BretterThanYou commented 3 months ago

Thank you so much!