Angular doesn't properly bundles stylesheets into the library's output

[Mohamed7Imran]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Not applicable

Description

We are Syncfusion, and we are seeking your guidance regarding an issue we are experiencing with our components in an exportable Angular library. Basically, we are trying to contain styles in the library itself and do not want to explicitly import any styles into the application that consumes the library. 

We are currently utilizing the Syncfusion Angular Scheduler component in an exportable Angular library. You can find more details here.

Conventionally, we provide styles for our ej2-angular-scheduler control by importing them from the node_modules directory as follows:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';

We have encountered an issue where, during the ng build process, the styles are bundled correctly in a standard Angular application and the component renders as expected. However, when building the same component within an Angular library and when we packed and export it, the styles are not bundled properly, leading to issues with the component rendering in the consuming application it take more time for compilation as well as styles not applied.

Could you please provide guidance on how to resolve this issue or suggest best practices for managing styles in Angular libraries to ensure they are properly bundled and applied?

Thank you for your assistance.

Minimal Reproduction

We have attached a sample demonstration where an exportable Angular library (mylib) contains the Scheduler component. The MyApp sample shows how we packed the library and utilized the library in an application that consumes it without explicitly adding styles.

Demostration.zip

Replication procedure:  

• Build the library(mylib) and locally pack the library.
• Move the packed library to the Angular application (myapp).
• Install the packed library through package.json and compile the application. 

Exception or Error

Not applicable

Your Environment

Angular 17, node 18

Anything else relevant?

Not applicable

[alan-agius4]

Node module packages should not be imported using relative paths. This rule applies to both JavaScript and CSS files in application and library builders.

Incorrect:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

Correct:

@import '@syncfusion/ej2-base/styles/material.css';

[Mohamed7Imran]

Hi @alan-agius4 ,

Thanks for the update still facing same issues.

[alan-agius4]

Out of curiosity, why not include the CSS in the global stylesheet of the application? It seems like the referenced CSS is intended for global use rather than being tied to a specific component. Importing it directly into a component could significantly increase its size, especially if these stylesheets are also used in other components.

I tried building this locally, but it seems that one of the stylesheets isn't exported correctly:

✘ [ERROR] Could not resolve "@syncfusion/ej2-angular-schedule/styles/material.css"

    <stdin>:9:8:
      9 │ @import '@syncfusion/ej2-angular-schedule/styles/material.css';
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./styles/material.css" is not exported by package "@syncfusion/ej2-angular-schedule":

    ../../node_modules/@syncfusion/ej2-angular-schedule/package.json:43:13:
      43 │   "exports": {

[Mohamed7Imran]

why not include the CSS in the global stylesheet of the application?

We would like to contain the required styles for the scheduler component in the library itself, as well as the referenced styles is for scheduler dependent styles as it implements and holds other components in it. 

I tried building this locally, but it seems that one of the stylesheets isn't exported correctly:

You can add:

@import '@syncfusion/ej2-schedule/styles/material.css';

instead

@import '@syncfusion/ej2-angular-schedule/styles/material.css';

[alan-agius4]

This approach seems quite inefficient for both build and runtime performance, unless these stylesheets aren't used by any other components in the application. Otherwise, it could lead to redundant stylesheet processing and duplicate styles in the bundles.

For context, the ScheduleComponent alone is surprisingly 4.1MB in size 😲!

The styles appear to be applied correctly:

However, given the complexity of the component's styles, it’s hard to determine which styles might not be applied. To address this, identify and focus the bare minimum styles required to show case the problem, create a minimal reproduction to investigate further. Then you can push this repository to github and link it here.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}