I am encountering an issue with my Angular 7 application during initialization. I have a class named "testing" that simply changes the text color to red. I tried placing the class in the index.html file within a style tag, as well as in the styles.scss file with all my global styles. I tested both approaches and saw the same outcome. I am using angular/cli and ng serve to test my application, and the following is the layout of my index.html page:
<body>
<app-root>
<div class="container">
<span class="testing">Application is loading, please wait...</span>
</div>
</app-root>
</body>
Expectation: The text within the span should be red with a slight indent (via bootstrap container class).
Actual Results:
- After entering localhost:4200 in the url and pressing enter, the text initially appears at the top left corner of the screen without the red color before the app finishes rendering.
- Upon refreshing, the same issue as described in #1 occurs.
- When I press shift+refresh, there is a split-second display as mentioned in #1 before the text is indented inside the bootstrap container div and changes to red.
I am seeking an explanation for what is causing this behavior and what steps I can take to ensure that #3 occurs without any momentary style changes. If further information is required for a solution, please feel free to request it.