Repository navigation
[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 #4220
Description
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.
Reacted by Chari4U, Sean G. Wright, Jonathan Grupp, Benjamin Charity and Cocioaba Cornel
Activity
deebloo commentedon Jan 26, 2017
@luisabreu could you mark this as a feature request? this may be a candidate for the planned plugin system
luisabreu commentedon Jan 26, 2017
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 commentedon Jan 26, 2017
@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.
[-]Change place where css bundles are injected in index.html or let us specify a media on the angular cli json configuration file[/-][+][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[/+]wz2b commentedon Mar 8, 2017
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 commentedon May 22, 2017
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 commentedon Jun 5, 2017
@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 commentedon Jun 21, 2019
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 commentedon Sep 9, 2019
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.