Doesn't work with Angular 6 when built with production mode

[chakib-mohamed]

Hello,

It seems that the example provided in : https://stackblitz.com/edit/css-vars-ponyfill-29 dosn't work in IE11 when i start the application with production mode enabled : ng serve --prod
Do you have any idea of the origin of the problem ?

Thanks in advance.

[steven-hyde]

We have the same problem. Everything seems to work fine when debugging using localhost, however once we compile the code using Angular 6 CSS Vars no longer works in IE11.

Here is an example of what the CSS of a button we use looks like when compiled in Angular 6,

And here is an example of the CSS of that same button using localhost debug of Angular 6,

I would like to add some additional information. We use the "watch" config in order to support angular encapsulation. Items that are encapsulated are working properly even when compiled as long as we're using the watch command. Here is an example of that,

It's only components that are not encapsulated that are not working. (In the above examples we are using the color black for all our variables for testing. All components should be black.)

[winnemucca]

@steven-hyde @chakib-mohamed Does this not require a JavaScript option? I opened up the stackblitz and see :root. Still learning this myself, to be honest. If you guys figured this out only using css I would love to see your approach.

[jhildenbiddle]

@chakib-mohamed, @steven-hyde, @winnemucca --

Apologies for the delayed response. I was focused on other tasks for a few months, but I am now trying to catch up on GitHub issues.

I make no claims of being an Angular expert so perhaps I'm missing something, but I was able to put together a demo of the ponyfill working with Angular 6 in production mode on StackBlitz:

• https://stackblitz.com/edit/css-vars-ponyfill-77

Setup was pretty simple once the basic Angular app was in place:

1. Install css-vars-ponyfill as a dependency
2. Enable legacy polyfills in polyfills.ts
3. Add css-vars-ponyfill to polyfills.ts
4. Add sample styles to styles.css
5. Call enableProdMode() in main.ts to enable production mode
6. Toggle the preview window in StackBlitz (required when swapping between dev/prod mode -- see this StackOverflow answer for details)

Tested in IE by loading the preview window only (https://css-vars-ponyfill-77.stackblitz.io/). Works as expected, with ponyfill-processed CSS available in the console.

Happy to help investigate further if needed, but as I mentioned my Angular skills are limited.

[jhildenbiddle]

@chakib-mohamed, @steven-hyde, @winnemucca --

Since I have not heard back, I am going to assume this issue has been resolved. I am happy to investigate further if you are able to provide additional information that allows me to reproduce the error.

[mdonjones]

We were having the exact same issue - everything working fine on localhost, but after deployment components that were not encapsulated were not being properly styled in IE11. We managed to get around the issue by setting the extractCss compiler option in angular.json to false.