Angular - CSS loaded delayed inside of app-root

Question

I'm trying to implement an animation on app start inside of <app-root>...</app-root>. Therefore I've done the following:

<app-root>
    <style>
      h1 {
        font-family: 'Calibre Medium';
        color: black;
        font-size: 2rem;
        margin: 0;
        letter-spacing: 1px;
      }
    </style>

    <h1>Test</h1>

</app-root>

It's being displayed, but its CSS is loaded delayed, hence the font is different initially and changes after about 1 sec.

Is there a way to improve this or another approach to implement such behavior?

EDIT: I've already tried to load style inside of the docs head and style.css - no difference.

EDIT: I'm using bootstrap - could this cause a problem?

then try inline style. It is not elegant but maybe it will solve your issue... — mickdev
– mickdev, Commented Jul 8, 2019 at 18:13

mickdev · Accepted Answer · 2019-07-08 17:49:06Z

1

humm... why the style tags inside app-root ? is this a requirement ? if not, try this instead :

<head>
    //...
  <style>
    #my-beautiful-loader {
      font-family: 'Calibre Medium';
      color: black;
      font-size: 2rem;
      margin: 0;
      letter-spacing: 1px;
    }
  </style>
</head>

//...
<app-root>

    <h1 id="my-beautiful-loader">Test</h1>

</app-root>

This should load the css before displaying your h1 tag

Bonus: stackblitz example

edited Jul 8, 2019 at 17:49

answered Jul 8, 2019 at 17:43

mickdev

2,88514 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris W. Over a year ago

The content inside of app-root is for initial loading stuff, but the style stuff should be in document head as you show, +1

mickdev Over a year ago

yep Christ, I was refering to the style tag. I should have explain that better :)

nash11 · Accepted Answer · 2019-07-08 20:45:43Z

1

In Angular, if you want to add global styles, you can add it to your angular.json file.

src/styles.css

@font-face {
  font-family: Calibre Medium;
  src: url(/* path to your fonts file */) format(/* fonts file format */);
}

h1 {
  font-family: 'Calibre Medium';
  color: black;
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1px;
}

See here for font-face src format options.

angular.json

...
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ],
...

This will load your css when your application starts exactly as if you have added them as a <link> tag or a <style> tag in your index.html. (See here)

edited Jul 8, 2019 at 20:45

answered Jul 8, 2019 at 17:51

nash11

8,7503 gold badges23 silver badges58 bronze badges

8 Comments

Tom Over a year ago

It is still loaded delayed. Bootstrap classes are delayed as well.

nash11 Over a year ago

There could be something else at play here. Where are you loading your font from? The issue could be the font itself. Can you change the color to yellow or something and see if the css itself gets applied and whether it's just the font that's causing the issue?

Tom Over a year ago

Yellow f.e. is being loaded immediately, but nearly every other style, as well with the bootstrap classes are being loaded delayed.

nash11 Over a year ago

Where are you loading your custom font and bootstrap in your application?

Tom Over a year ago

Both are being imported to angular.json - I have a separate font.scss

|

Collectives™ on Stack Overflow

Angular - CSS loaded delayed inside of app-root

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related