0

I have a large scale application that is developed using Angular 4, there seem's to be an rendering issue exactly as mentioned in this post Angular 2 Chrome DOM rendering problems .When I navigate using router from one component to another , while this question has an answer already , I am still unable to solve this issue.

My Application structure is as follows :

app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)

Each of this selector imports same mixin file which is used to import @font-face , while the solution mentioned in the above mentioned post suggests to use parent component and use ViewEncapsulation.NONE , I cant do the same thing since there is a usage of the imported font face in each of these components app-home, app-main,app-sub and subsequent childs as well. When I remove the @import statement from the .less files I get an exception like 

Variable @helvetica-bold is undefined

Is there a workaround to make my texts appear normally in chrome when I route from one component to another.

Am Novice
  • 325
  • 2
  • 9
  • 21
  • Could you elaborate, how is it supposed to look and how is it looking in chrome right now instead? – Rence May 11 '18 at 13:15
  • The original text is present in the DOM , but hidden from view , just like the example given here https://stackoverflow.com/questions/42766830/angular-2-chrome-dom-rendering-problems – Am Novice May 11 '18 at 13:19
  • Is it only the helvetica bold that has this issue, or other fonts as well? – Rence May 11 '18 at 13:22
  • All the fonts present in the @import mixins file – Am Novice May 11 '18 at 13:26
  • Can you confirm the fonts are all only importet once? Search for the font names in the whole project, including all plugins. Maybe some plugin is also importing the fonts at the same time. – Rence May 11 '18 at 13:27
  • app-home ,app-main and child component all import it at the same time , thats the issue I am not able to fix – Am Novice May 11 '18 at 13:30
  • I understand the issue now. I'll post an anwser you can try. – Rence May 11 '18 at 13:32

1 Answers1

1

You need to make sure the font import is only called once. Hence, you should remove all the font imports from the mixin file as you have already tried in your answer.

But, you also need to ensure the fonts themselves are still present once in your app where all views can access it. You probably have a file like 'app.less' or something similar, that contains styles that are available in all parts of your app. Cut the font-imports from your mixin, and instead place it in this file (make sure the path references are still valid, they might need to be adjusted). If you do not yet have such a file, you will need to create one and load it once on app start.

Rence
  • 2,900
  • 2
  • 23
  • 40
  • I have around 45 components and some common stylings have been customized for each component in its .less file , so I dont think placing them in single common file is feasible – Am Novice May 11 '18 at 13:39
  • You should only place the font import in a common file, not all stylings. Since this is a documented bug in Chrome, and it is indeed caused by importing the same font multiple times, there is currently no workaround besides removing the additional imports. – Rence May 11 '18 at 13:43
  • Also, didn't you say the files all use the same mixin? They probably don't all have their own copy of this mixin file, so you will only need to cut the import once from there, and paste it to the common file, not 45 times. – Rence May 11 '18 at 13:46