angular 4 multiple global styles with lazy loading

Question

I am building an angular 4 application with angular-cli version 1.3.2 so far so good. I read in documentation that we can use global style with lazy loading at https://github.com/angular/angular-cli/wiki/stories-global-styles.

Now when I run the command

ng build --prod -vc -nc --build-optimizer

it generates following output for bootstrap

chunk {bootstrapBundle} bootstrapBundle.cf320d25069acd157990.bundle.css (bootstrapBundle) 96.9 kB {inline} [initial]

As per my understanding this css should be applied to the website but, when I see the website it doesn't have any bootstrap css applied on it.

Now, how can I use bootstrapBundle or bootstrap chunk in the site ?

Here is my angular-cli.json style configuration

"styles": [
      "styles.scss"
       {
         "input": "./assets/smartadmin/bootstrap.scss",
         "lazy": true,
         "output":"bootstrapBundle"
       },
    ],

Please help.

Thanks.

Have a look in to Lazy load application theme styles with Angular CLI I think it should answer your question — angularconsulting.au
– angularconsulting.au, Commented Sep 18, 2017 at 23:56
@Kuncevic thanks for the link. I had also solved it in same way. I will add my answer. — Riy
– Riy, Commented Sep 19, 2017 at 6:33

hlovdal · Accepted Answer · 2023-04-14 10:40:08Z

6

I have found a solution to my problem with help of @Kuncevic who pointed me to this

Lazy load application theme styles with Angular CLI

Now until this point the css files will be generated and if we add them to index.html via

<link href='yourstyle.bundle.css' rel='stylesheet'/>

then it will be eagerly loaded on first request.

But the Problem Is, I really want to lazily load them and apply them over my website

Solution.

Extracted css as mentioned in the article
Added style references to app.component.html since this will be a root component therefore I added it in this.

app.component.html

<div *ngIf="stylesLoaded">
  <link rel="stylesheet" href="/bootstrap.cf320d25069acd157990.bundle.css">
</div>

Added stylesLoaded property to app.component.ts
Implemented AfterViewChecked in app.component.ts. For details Check Life cycle Hooks

app.component.ts

export class AppComponent implements AfterViewChecked {
  stylesLoaded: boolean = false;
  
  constructor() {}

  ngAfterViewChecked() {
    this.stylesLoaded = true;
  }
}

Now once your view is rendered the AfterViewChecked will be fired and makes the stylesLoaded to true this will enable the styles link in app.component.html and start loading them.

Hence lazy loaded :)

In similar way you can load JS module(s).

Hope that will help someone. Happy coding

edited Apr 14, 2023 at 10:40

hlovdal

28.6k11 gold badges103 silver badges178 bronze badges

answered Sep 19, 2017 at 7:03

Riy

4891 gold badge9 silver badges17 bronze badges

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

2 Comments

C0ZEN Over a year ago

How could it works since you add the css bundle with the hash as a link in your index file ? Each time the app build, the hash change, then your link will be false and the bundle fetch will be the old one.

tgebauer Over a year ago

Extracted CSS bundles are no longer hashed in newer versions of Angular (definitely v10).

Collectives™ on Stack Overflow

angular 4 multiple global styles with lazy loading

1 Answer 1

Solution.

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related