2

I am looking to build an Angular 8 application and call Caspio datapages from inside.

The standard approach to using a Caspio Datapage is to embed a script tag as follows:

<script type="text/javascript" src="https://c1acu417.caspio.com/dp/A57E7000f6812a2641704a929225/emb"></script>

However, it does not seem to be working.

So, for example, I am doing the following:

Setup a StackBlitz ( https://stackblitz.com/edit/angular-m6cshx?file=src%2Fapp%2Fapp.component.html )

Nothing shows up.

Here, it is working in static html:

https://codesandbox.io/s/cocky-dawn-8l7pv

Does anyone have any experience or ideas as how to achieve this in Angular?

Why cannot I simply embed that script?

0_tr0jan_0
  • 53
  • 6

1 Answers1

2

Your problem

  • You cannot put script tags inside of an Angular Component's Template. If adding via script tag is the only option, you have to add it to the index.html.
  • You are adding the script tag as the type of module but it is not a module

If you want to bring this into your angular application, you have to put in your index.html page or, download the file manually and add it to the bundle. (Currently, you can't reference a script by url in your ng build step).

Advice

Figure out if this library has the ability to dynamically render the form. If you can have control of that, then you're good. Just add it to the index.html page. Otherwise, you're going to have to build a component that dynamically adds the script tag reference (with JavaScript) to that component once it's rendered. It's not a good way to do things, but it should work.

Here's an idea of how to add a script tag programmatically to a component:

const s = this.renderer2.createElement('script');
s.type = 'text/javascript';
s.src = 'https://path/to/your/script';
s.text = ``;
this.renderer2.appendChild(this._document.body, s);

Referenced Here: http://blog.davidjs.com/2018/09/insert-script-tags-in-angular-components/

Adding script tags in Angular component template

https://github.com/angular/angular/issues/4903

mwilson
  • 12,295
  • 7
  • 55
  • 95
  • I have updated the StackBlitz to show the correct script tag as text/javascript. I had changed it to see if that made a difference. – 0_tr0jan_0 Dec 29 '19 at 02:53
  • It will not. Angular automatically strips script tags out of component html. Please upvote/mark as answer – mwilson Dec 29 '19 at 02:54
  • You stated that I could add it to the index.html page. Where do I place it, such that it will embed the datapage that I want, on the page that I want? I would like to deploy potentially hundreds of these in specific modules of my app. – 0_tr0jan_0 Dec 29 '19 at 02:58
  • You have to dynamically add it to the component via javascript then. If it's going to render something, you're going to have to do extra work to control it. Angular doesn't work like that. IMO: I wouldn't use this library in your application. Or, contact the developer and request to have them add a feature to specify which DOM element to render it on upon invocation with a JavaScript method. Better yet, just recreate the form using Reactive Forms (that would be the 'angular way', of course) – mwilson Dec 29 '19 at 03:00
  • thanks @mwilson. The suggested technique worked. However, I understand that we are manipulating DOM, which is not angular way. Is there any specific reason why this is bad, or where it will start to affect performance or otherwise? – 0_tr0jan_0 Dec 29 '19 at 03:07