Angular Lazy Load Common Styles Specific to a Feature Module

Angular Lazy Load Common Styles Specific to a Feature Module

Here I will walk you through a step-by-step guide on how to lazy load the common styles specific to a feature module. Angular Lazy Load Common Styles Specific to a Feature Module - Angular inDepth

One of the challenges I faced when leveraging lazy loading feature is finding a location for the common styles (css or scss) that are specific to a module, which can then be lazy loaded at the same time as the feature module gets loaded.

One of the solutions I found from a bit of Googling was to lazy load the scss files by configuring them in angular.json and building it as a separate file. This then has to be injected to the DOM from one of the component under the feature module.

This solution would work, but going through the other features provided by Angular, I found a much easier way to lazy load these styles only when the feature is loaded.

_ViewEncapsulation _is the feature I used additionally to lazy load the styles. It has three encapsulation strategies and _None _is the encapsulation strategy I used.

What is ViewEncapuslation ?

ViewEncapsulation is a setting provided to the component which decides whether the template and style defined within the component itself can affect the whole application or not.

Angular provides three active encapsulation strategies as follows:

  • *Emulated *: Styles defined in the component are scoped only to that component without conflicting with other components. This is the default option.
  • *None *: Do not provide any kind of encapsulation.
  • *ShadowDom *: Uses a Shadow DOM to encapsulate styles.

If you are not familiar with ViewEncapuslation, you can find more about it in Angular documentation.

angular programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica