Angular-cli: [Feature Request] Change place where css bundles are injected in index.html or let us specify a media on the angular cli json configuration file

[luisabreu]

OS?

All

Versions.

All

Repro steps.

just build or serve the app

Currently, the served index.html page (ng serve or ng build) injects the css bundles just before the end of the header element. Since there's no way to specify the media type of the stylesheets that are added to the angular-cli configuration file, there's really no way for us to correctly inject a stylesheet for printing in the index.html page (I'd like to add the printer css file after the screen css file, but unless I put both on the page, that will never happen).

So, if the bundles were injected right after the base element (when defined), I'd be able to solve this without loosing the ability to bundle the main css file.

[deebloo]

@luisabreu could you mark this as a feature request? this may be a candidate for the planned plugin system

[luisabreu]

Hello @deebloo. Since I'm not a contributor, I'm under the impression that I can't do that (add a label). Would you mind doing that for me? Btw, is there any workaround for this problem?

Thanks.

[deebloo]

@luisabreu I can't add tags either, just mention it in the title of the issue. I can't think of a clean workaround at the moment.

[wz2b]

Is there some kind of workaround for this? Something like:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css" media="print">

in index.html? The file itself is in the bundle... it's a little opaque (to me) how it gets placed in the output, or what media type is specified (if any). I have the problem that any printing looks terrible because the bootstrap styles just don't get applied.

[filipesilva]

A workaround for this is to add a link tag to a file in assets, but unless there is a more pressing case that needs tag location I don't think a more involved system will be added.

[djejaquino]

@filipesilva Unfortunately, I can't use fullcalendar.io stylesheet properly because of this issue. Some features, like header buttons do not work properly.

Take a look at this

[webcourse-ng]

Won't reduce bundle size, but one can add to angular.json a separate css file under styles, with content wrapped in @media print. Helps a bit with organisation.

[angular-automatic-lock-bot[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._}