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.
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.