0

I use Angular 5.2.6 and Clarity 0.11.11 and for some reason, with SSR, Clarity Icons are empty while, in the browser, they're perfectly displayed.

I followed the instructions to specify the files to include for both server app and browser app, multiple times without any changes. No errors are shown.

Do you have any advise? Any clue?

Any idea to see what's happening while SSR?

Sample of result with Angular Universal: <clr-icon _ngcontent-c21="" shape="check"></clr-icon>

Thanks

Bérenger -appvizer-
  • 23
  • 7
  • I realize its difficult to paste all the relevant bits of your app here. Can you post a sample project/repo on GitHub so we can take a look at? It's difficult to understand whats going on without a way to recreate the issue and see the output. – hippeelee Mar 30 '18 at 23:26
  • Try and update your angular to version 5.2.9. In previous versions there was a bug which caused styles to not be correctly added to elements, when using platform-server. This might relate to your issue. – darron614 Apr 02 '18 at 15:41
  • Did you also ensure that you include the proper files into your platform app in the angular-cli.json file? It has to be in both versions. – Jeremy Wilken Apr 02 '18 at 17:14
  • Thanks darron614, but the `5.2.9` version of universal didn't help. At least, it's up-to-date now. Thanks Jeremy, I checked and the needed files (JS + CSS) are included in both apps (browser and server). Thanks hippeelee, it remains a couple of tracks, then I'll try to reproduce from new project. – Bérenger -appvizer- Apr 03 '18 at 09:30
  • I tried to force adding the Clarity Element (`clr-icon`) within SSR in a dirty way and discovered that it is not compatible with angular universal. So even if we found a way to add it correctly, this version with custom element cannot work. What a disappointment! Thanks a lot for your help. – Bérenger -appvizer- Apr 03 '18 at 13:21
  • If you are adding it in a 'dirty way', what is that? Can you describe what you're doing so we can understand? – Jeremy Wilken Apr 03 '18 at 22:01
  • By the way, we run the Clarity website using SSR just fine, so it does work. – Jeremy Wilken Apr 03 '18 at 22:02
  • Hi Jeremy, thanks for your answers. I directly import ClarityIconElement by typescript. But, in the end, it doesn't matter because this class explicitly references `document` which is not available on angular universal. It concerns only icons; Clarity UI and angular work fine for us too. For instance, [Clarity icon sets](https://vmware.github.io/clarity/icons/icon-sets) doesn't display icons out of the SSR but all other components are rendered perfectly. – Bérenger -appvizer- Apr 04 '18 at 15:42
  • What is your expectation? This is rendering as expected, are you expecting the SVG to be injected? Icons are actually web components, not Angular, and don't fully render in SSR, but when you view a file rendered with SSR with icons would render it properly. – Jeremy Wilken Apr 05 '18 at 19:54
  • Unfortunately, I figure it out too late. We running out of time for now, but we already have a SVG rendering compliant with server-side for another kind of assets. So, probably, our next plan is to be full angular without the web components dependency of Clarity's icons. – Bérenger -appvizer- Apr 09 '18 at 07:54

0 Answers0