Angular library with multiple entry points lazy loading

Question

I have a custom library with some custom element like: custom-a, custom-b and custom-c. The structure is the following:

projets/custom-lib
- src/lib
  - custom-a
    - custom-a.component.ts
    - custom-a.component.scss.ts
    - custom-a.module.ts
  - custom-b
    - custom-b.component.ts
    - custom-b.component.scss.ts
    - custom-b.module.ts
  - custom-c
    - custom-c.component.ts
    - custom-c.component.scss.ts
    - custom-c.module.ts

public-api.ts (includes those lines:

export * from './lib/custom-a'
export * from './lib/custom-b'
export * from './lib/custom-c'

)

I'm using custom-b component in another app, by importing it on its app.module.ts. I've noticed that unless adding custom-b in the app template (adding ),custom-b.component.scss content is not used/seen on browser. Why is that? Is there lazy loading for modules by default? (No routing is used)

Thanks!

Can you add thef `custom-b` class (or maybe a [stackblitz](https://stackblitz.com/)) ? There is no lazy loading properly said, I would say that you did an error creating the custom-b component. — Raphaël Balet, Apr 14 '23 at 07:06
Adding a simplified stackblitz (without library, just some simple modules): https://stackblitz.com/edit/angular-hkcgpv?file=src/app/app.component.html There are the main appModule which shows a p element with the class test-b, and three modules custom-a, custom-b, custom-c. Only when adding the app-custom-b element to the app component, we see custom-b styling being applied — Yael, Apr 16 '23 at 09:41

score 0 · Accepted Answer · answered Apr 16 '23 at 15:54

Okey, so I think you did miss understand the way css works in angular. and are applying a css in an improper maner.

By telling that ViewEncapsulation.None you're removing the shadow DOM angular is generating. Which, when the components get rendered, will apply his css to every other element.

@Component({
  selector: 'app-custom-b',
  templateUrl: './custom-b.component.html',
  styleUrls: ['./custom-b.component.css'],
  encapsulation: ViewEncapsulation.None, // <-- here
})

But this will only be applied when used.

A component, in Angular, should be able to leave on his own and should not impact other component (Not that way at least).

But if you wished to have a shared css file, you could do one of the following

1: Shared CSS

Create a new shared.component.css file
Add you css in there

:host {
  .test-b {
    background-color: pink;
  }
}

Use it in the component you wish.

2 : Global CSS

Add global css in the global_styles.css file. this will change the teat-b in your entire project

3 : Import exported css in the `angular.json` file

Open the angular.json file
Add a new style to the styles array

"styles": [
"src/global_styles.css",
"new/path/to/my/project"
],

_here if you don't know how to export CSS _

Explanation: ViewEncapsulation

None

Css will, when rendered, get applied to the entire project. prefer adding the component selector to avoid it having an impact in your project

app-custom-b {
  // your css
}

Pro: Let you change the css of some children element that you would be able to change otherwise.

Con: Not that good for optimization.

Encapsulated

Will be created in a kind of Shadow DOM.

Pro: Optimized

Con: You cannot change css in some children element that are in their own shadow DOM.