Angular not showing my div content with external URL

Question

I have a piece of html code like this

<div 
  id='paysonContainer'
  url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'>
</div>

<script 
  type='text/javascript' 
  src='https://test-www.payson.se/embedded/Content/payson.js?v2'>
</script>

When I create a simple html file and paste this piece of html code there, there is no problem and I see what I am supposed to see, but when I copy the same html code to a view in an Angular app, the div is not loading and shows nothing. You can check it out here https://stackblitz.com/edit/angular-7bkbm6 (on hello.component.html ) If you want to see the difference create a simple html file on your machine, paste the code and open it on your browser.

Angular remove scripts from templates. Consider declaring this script as an asset of your project. — user4676340
– user4676340, Commented Aug 24, 2018 at 9:12
@trichetriche I dont think that will work, as the script will be added to the head of the page, and there will be no corresponding div — user184994
– user184994, Commented Aug 24, 2018 at 9:15
If your script is added to the top of the page, then you should have no issue. — user4676340
– user4676340, Commented Aug 24, 2018 at 9:17
Why? As soon as the script executes, its going to look for the paysonContainer div, which isnt going to exist... — user184994
– user184994, Commented Aug 24, 2018 at 9:17
@Yashar It seems to have a problem with the closing tag, but it does work: stackblitz.com/edit/angular-nkdqt6?file=src%2Findex.html. Just delete that closing tag and rewrite it — user184994
– user184994, Commented Aug 24, 2018 at 9:29

danday74 · Accepted Answer · 2018-08-24 09:16:28Z

0

For security reasons, script tags are not valid in Angular. Angular will rip them out. This is to prevent XSS attacks and so on.

If you want to load some JS then add it to your index.html file in the head section. Alternatively, add it to angular.json in the scripts section. If you go down the latter route you will need to do a Webpack restart.

answered Aug 24, 2018 at 9:16

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yashar Over a year ago

I think script tag is not the problem , see my comment above

Collectives™ on Stack Overflow

Angular not showing my div content with external URL

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related