Components not rendering inside Builder but renders properly on localhost - Angular Integration

Technical Questions
1

Hi! We have used an existing Angular Application with a couple of components and integrated it with Builder. The component has gotten registered as it appears in the Components tab on the side panel. We can also drag and drop the custom angular component onto the editor. But it is not rendering properly.

The component renders properly on localhost but does not render properly inside Builder.
I think it is somehow related to the SCSS code, but I am not really sure.
I have attached a screenshot and a video regarding the problem here. It showcases the button component being rendered properly on localhost but not inside Builder.

Screenshot 1 - Button on localhost

Video 2 - Button inside Builder

Unfortunately I am not allowed to share the code. Please let us know if you need any more information.
Would really appreciate your help.
Thanks in advance!

2

Hi @Sushaanth it is hard to troubleshoot specifically on our end without a reproducible code example. I have a hunch that there is something wrong with how you are registering the button component

I know we worked on registering button components int he past, I would check that and our Angular SDK Documentation to make sure you are matching the exact format when registering a component. Maybe even try simplifying the component down until it works and you can start adding back things until it breaks to see where the issue is coming from

Hope that helps! Let me know if you are able to provide code or a deployed example of your app so we can look further

1 Like
3

Hi @TimG we have worked on this application by referring to the code which we had done before and using the help you had provided us at that time when we had asked on the forum.
I think I have included all the code needed for registration of the component. Let me list them down here.

Assuming I have an already working component (on localhost), these are the changes I have made:

  • Added code for the declared button component inside declarations and added BuilderModule.forRoot() with our public API key in app.module.ts.

  • Added <builder-component> tag with the model we used in app.component.html.

  • Added @Builderblock inside the button component with the customizable inputs and declared the variables using @Input inside the export class in button.component.ts.

  • The templateUrl inside @Component in button.component.ts is button.component.html and we have used the variables there using this syntax {{variable_name}}

  • The styleUrls inside @Component in button.component.ts is button.component.scss.

Am I missing anything here? Please let me know.
Thanks!

4

Hi @Sushaanth, checking in here if you got this to work. Are there already other custom components in your app that are rendering successfully? Your set up steps seem correct but it is difficult to verify without seeing the code. We need to see that or any error messages to investigate further. As Tim suggested above, I would also recommend simplifying the component until you can find the root cause.