reference here: https://surveyjs.io/form-library/examples/progress-bar-with-percentage/angular#content-code
I applied what was mentioned previously in addition to here :https://codesandbox.io/s/surveyjs-angular-forked-e57x1x?file=/src/app/components/survey.component.ts:100-131
But I get this error :
in.8fc986c4fb185c4a.js:1 ERROR Error: Can't create component with name: sv-progress-percent and default: undefined
at g.createComponent (422.ac5af511425ca71a.js:1:93176)
at g.ngOnChanges (422.ac5af511425ca71a.js:1:92762)
at g.oc (main.8fc986c4fb185c4a.js:1:1039126)
at xn (main.8fc986c4fb185c4a.js:1:1043674)
at qt (main.8fc986c4fb185c4a.js:1:1043475)
at se (main.8fc986c4fb185c4a.js:1:1043202)
at vp (main.8fc986c4fb185c4a.js:1:1076707)
at x_ (main.8fc986c4fb185c4a.js:1:1077005)
at vp (main.8fc986c4fb185c4a.js:1:1077030)
at x_ (main.8fc986c4fb185c4a.js:1:1077005)!
Screenshot 2023-04-10 141150.png
Hello,
I rebuilt and ran the example, but the mentioned error didn't appear in the browser console and the form ran correctly:
Would you please clarify how to reproduce the issue?
Inside the localhost it works for me, but after the deploy stage, this previous error appears
import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core'; import { Serializer, SurveyModel } from 'survey-core'; Serializer.addProperty('survey', 'progressTitle'); @Component({ selector: 'surveyjs-runner', template: `<div class="survey-container contentcontainer codecontainer"> <survey [model]="model"></survey> </div>`, }) export class SurveyjsRunnerComponent implements OnInit { @Output() submitSurvey = new EventEmitter<any>(); @Input() json!: object; result: any; model!: SurveyModel; // model!: Model; ngOnInit() { const survey = new SurveyModel(this.json); survey.addLayoutElement({ id: 'progressbar-percentage', component: 'sv-progress-percent', container: 'contentTop', data: survey, }); survey.onComplete.add((sender, result: any) => { this.submitSurvey.emit(result.data); this.result = result.data; console.log(JSON.stringify(sender.data, null, 3)); }); this.model = survey; } }
import { Component, Input } from '@angular/core'; import { AngularComponentFactory } from 'survey-angular-ui'; import { SurveyModel } from 'survey-core'; @Component({ selector: 'app-progressbar-percentage', templateUrl: './progressbar-percentage.component.html', }) export class ProgressbarPercentageComponent { @Input() model!: SurveyModel; get title() { return this.model.progressTitle; } get value() { return this.model.progressValue + "%"; } } AngularComponentFactory.Instance.registerComponent( "sv-progress-percent", ProgressbarPercentageComponent );
<div class="sv-progressbar-percentage" style="display: flex; flex-direction: row; gap: 16px; padding: 16px; line-height: 32px;"> <div class="sv-progressbar-percentage__title" style=" font-size: 20px; display: flex; color: #169cd7; "> <span>{{title}}</span> </div> <div class="sv-progressbar-percentage__indicator" style=" position: relative; display: flex; width: 100%; max-width: 100%; height: 32px; border: 1px solid #169cd7;"> <div class="sv-progressbar-percentage__value-bar" style=" position: absolute; background-color: #169cd7; left: 0; top: 0; height: 100%;" [style.width]="value"></div> </div> <div class="sv-progressbar-percentage__value" style=" font-size: 20px; display: flex; color: #169cd7;"> <span>{{value}}</span> </div> </div>
Hello,
Thank you for the clarification. I'll check this and get back to you shortly.
Hello,
Please follow this thread for further updates on this issue: https://github.com/surveyjs/survey-library/issues/5977.
Thank you
I followed the thread and did not understand what the exact solution is
Hi Steady,
A new version of SurveyJS libraries is already available. I would recommend that you upgrade and check to see if the issue is resolved. If it is not, I would ask you to share a problematic example so that I can run it locally and reproduce the issue,.
I appreciate your cooperation.
Looking forward to hearing from you.
The packages have been updated, but the problem still appears after publishing.
Hi jane,
is there any update?
Hello Steady,
Thank you for the update. Unfortunately, I'm unable to track the issue further without reproducing it locally. Please share a problematic sample so that I can run it on my side and reproduce the issue.
I greatly appreciate your cooperation.
Looking forward to your reply.
I have previously attached the code for the progress bar above,
Can you explain to me exactly what is required of me?
Hello Steady,
Thank you for the update. I will take your code and build an application for deployment and check to see if I can reproduce the issue. This may require some time. Thank you
Hello Steady,
Thank you for the update. I managed to locally reproduce this issue on a sample Angular app. We will research this issue and post our updates in the following GitHub issue: Custom Percentage Progress Component - The 'Can't create component with name: sv-progress-percent and default: undefined' error is thrown on an attempt to run a survey with a custom component.
Thank you for your cooperation. Please look forward to our updates.