Import external html containing script tag - doesn't work

Question

I have an index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <link rel="import" href="./common.html">
</head>
<body>
  <app-root></app-root>
</body>
</html>

and an external HTML file common.html which contains a script tag

<script>
  window.MY_APP = {
    MY_SETTINGS: {}
  }
</script>

As you can see I am importing common.html in index.html. The problem is that MY_APP becoming undefined after a successful render of index.html. I could see success call to common.html file in the network tab(Testing in Chrome browser - V 80.**).

This used to work seamlessly earlier but now broken.

Did anyone face this problem? or does anyone know what is happening? Thanks in Advance.

Can you try putting a console.log in the common.html script? I'm skeptical; I don't know if you can import HTML into HTML and have it parsed by the browser. It will be requested, no doubt, hence the call in the network tab, but I don't think it gets used. — Sydney Y
– Sydney Y, Commented Mar 7, 2020 at 5:30
@SydneyY This is something which used to work maybe around 1 month back. All of sudden exactly same thing not working anymore. As a script is not executed, the console will definitely not work. — prabhatojha
– prabhatojha, Commented Mar 7, 2020 at 5:38

Sydney Y · Accepted Answer · 2020-03-07 05:49:25Z

2

HTML imports were recently depreciated by Chrome, which would explain why this used to work for you and doesn't any longer.

https://www.chromestatus.com/feature/5144752345317376

In the decision thread they mention polyfills and something called Shadow DOM V0, so those might be alternatives for you.

This feature was Chrome-specific so it was removed.

answered Mar 7, 2020 at 5:49

Sydney Y

3,1503 gold badges11 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Import external html containing script tag - doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related