Conditionally load css files based on user input.

[Sobiru]

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?

[clydin]

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.

[Sobiru]

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?

[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.}