Angular-cli: Conditionally load css files based on user input.

Created on 17 May 2017  路  3Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.


@angular/cli: 1.0.3
node: 6.9.4
os: win32 x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/compiler-cli: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/platform-server: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3

Desired functionality.


My app uses different languages and some of them are right-to-left. I have two separate css files; one for LTR and the other for RTL.

Based on user input, I'd like to switch between these styles. (By switch I mean, the active one must be removed and the other one should take over).

Currently, for external css to load, I have to mention them in "styles" section of _angular-cli.json. That gives my no control whatsoever on conditionally switching between them.

What I used to do and was working fine until I recently updated, was to include the css directly in index.html and then changing the href attribute using @Inject(DOCUMENT). But as of now, css files inside my src directory are all 404 when the project is built or ng serve.

Is there anything I could do to address this issue?

RFC / discussion / question

Most helpful comment

A file needs to be added to the configuration as an asset (or placed in a directory configured as an asset path) for it to be available to the built project.

All 3 comments

A file needs to be added to the configuration as an asset (or placed in a directory configured as an asset path) for it to be available to the built project.

Thank you so much, @clydin . Now it is working like before. However, do you think this is the right approach? Are there any other ways to conditionally load css files during runtime?

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jmurphzyo picture jmurphzyo  路  3Comments

rajjejosefsson picture rajjejosefsson  路  3Comments

purushottamjha picture purushottamjha  路  3Comments

5amfung picture 5amfung  路  3Comments

hartjo picture hartjo  路  3Comments