Issue T12658
Visible to All Users

progressbar-percentage Bug (Angular)

created 2 years ago

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

Show previous comments (10)

    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.

        Answers approved by surveyjs Support

        created 2 years ago

        Hello Steady,
        Our developers have researched this issue. To fix the issue and use custom components in an Angular application, it is necessary to declare a custom component in the NgModule decorator's declarations array, as shown in the following code snippet:

        JavaScript
        export class AppModule { static declaration = [ProgressPercentComponent] }

        The example is available in the attachment.

        In Angular, the NgModule decorator is used to define and configure modules. One of the properties of the NgModule decorator is declarations, which is an array of components, directives, and pipes that belong to the module.
        When using Ahead-of-Time (AOT) compilation, the Angular compiler needs to know about all of the components, directives, and pipes that will be used in the application ahead of time, during the build process. This is different from Just-in-Time (JIT) compilation, where the compiler can dynamically load components as they are needed at runtime. It is necessary to run the above code for the AOT compiler to be aware of the component and include it in the compiled output.

        Please let me know if you have additional questions.

          Comments (1)

            Many Thanks, everything worked perfectly.