How to pass variable data to index.html in angular?

Question

I am trying to insert a dynamic script into the head of index.html, however the script contains a variable. See below - The variable should be inserted into shopOprigin indicated by {{shopName}} which is obtained through ActivatedRoute in app.component.ts

<script>

ShopifyApp.init({
      shopOrigin: 'https://{{shopName}}.myshopify.com'
    });

</script>

score 0 · Answer 1 · answered May 24 '18 at 05:24

You shouldn't be looking to use the environment variables inside of you HTML. What you should try instead is after importing the ShopifyApp library into the head of your index.html to then call the function:

ShopifyApp.init({
   shopOrigin: 'https://' + environment.shopName + '.myshopify.com'
});

Into maybe your app.module.ts or main.ts (before you bootstrap your application). In both files you can import and use your environment variables.

How to pass variable data to index.html in angular?

1 Answers1

Linked