CODEWITHSUNDEEP
angularangular-cli
Riy
Riy

Reputation: 489

angular 4 multiple global styles with lazy loading

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.

Upvotes: 6

Views: 6142

Answers (1)

Riy
Riy

Reputation: 489

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.

  1. Extracted css as mentioned in the article
  2. 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>
  1. Added stylesLoaded property to app.component.ts
  2. 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

Upvotes: 6

Related Questions