How to use css variable from CDN file in angular 6?

[sga-girdhari]

Hi @jhildenbiddle ,

I am trying to use this library in one of my angular 6 project, which is using CSS variable from a file coming from CDN (due to theme implementation, I can switch theme/files dynamically).

But I am getting CORS issue on IE, and warning on chrome/other browsers regarding undefined variable (I will set onlyLegacy to true though).

Can you please help me, in loading file from CDN on angular 6 project.

Please see attached snapshot.

Thanks.

[jhildenbiddle]

Hi @sga-girdhari,

The errors you are receiving indicate that the CDN server you are using is not CORS-enabled. Specifically, the CDN server is not setting the appropriate response headers that allow the ponyfill to request <link> stylesheets via XMLHttpRequest (aka "AJAX"). This is required in order for the ponyfill to work, as it is the only way the ponyfill can read the CSS content of the linked stylesheet.

If possible, switch to a CDN that is already CORS-enabled. If this is not possible, consider hosting the CSS file locally (on the same server as your app). Either one of these options will (presumably) also resolve the undefined variable warnings you are seeing in the console as well.

[sga-girdhari]

Hi @jhildenbiddle ,

Thanks for replying so quickly, I am doing it locally for now, but will try to enable CORS on CDN server.

Thanks.

[sheikalthaf]

@sga-girdhari @jhildenbiddle Hi,

I'm planning to implement this ponyfill to angular 7 project. but var it is only working for app.component file.
for other component it is not working. anything I'm missing here in angular project

[sga-girdhari]

Hi @sheikalthaf,
From where are you are calling cssVars method, I would suggest to do it from main.ts file. And it should work for you irrespective of your component (as per my understanding) variables are replaced on runtime.

Thanks.

[sheikalthaf]

@sga-girdhari Thanks. I have placed the cssVars in themeService in root.

cssVars({
      rootElement: element,
      onlyLegacy: false,
      onlyVars: true,
      variables: theme.properties,
      watch: true,
      onComplete: (a, b, variables) => {}
    });

@jhildenbiddle if i enable watch then styles get applied but IE browser hangs for a while and then restored.
how you handling this in your angular app?

[jhildenbiddle]

@sheikalthaf,

Best to create a new issue since this one is closed.

Before you do that, understand that I'm not sure how much help I can provide without seeing the CSS involved. Consider creating a demo project that is configured like yours so others can review and make suggestions. I have found codesandbox.io and stackblitz.com useful for such tasks.