Repository navigation
AOT Compilation Doesn't Work With Sub-Package Fonts #20676
Description
I'm submitting a...
[X] Bug report
(It might be a regression, or it might be a bug uncovered in a browser vendor change.)
Current behavior
When I run my project with npm run ng -- serve --aot or when I build npm run build, fonts don't show up in Chrome or Firefox. They do show up correctly in Safari and they do show up correctly across modern browsers when I run without --aot. See below for the project details.
Expected behavior
Fonts should display correctly when I run under --aot.
Minimal reproduction of the problem with instructions
Here's a repo with a minimum case reproduction:
https://github.com/jameslafferty/aot-font-issue
- run
npm start - Observe the 3 home icons at http://localhost:4200 in Chrome and Firefox
- run
npm run ng -- serve --aot - Observe the placeholder icons at the url above and the error in the dev tools console
What is the motivation / use case for changing the behavior?
Providing a demo application within a mono-repo that hosts components used across many applications.
Environment
Angular version: 5.0.3
Browser:
- Chrome (desktop) version 62.0.3202.94
- Firefox version 57.0
Reacted by Davide Favia, Christopher Boyd, Sibiraj, Mansour Ghaoui and J Minor
Activity
wKoza commentedon Dec 1, 2017
I can't reproduce your problem with `ng serve --aot' and chrome 62.0.3202.94
jameslafferty commentedon Dec 1, 2017
I'm also now having trouble reproducing it in my simplified example, although I'm still seeing the problem in our real-life code. I swear the issue came up in the example yesterday. Let me see if I can sort out what's different now between the two. Thanks for your patience and sorry about the noisiness.
jameslafferty commentedon Dec 5, 2017
It seems likely that this is the same issue as angular/angular-cli#8735. I'm also having trouble reproducing it there, and difficulty installing @chatham/pattern-library (which might be a private module that reporter is using -- similar to what I'm doing). Am continuing to work on reproducing. FWIW, I'd be content to track both issues together.
jameslafferty commentedon Dec 5, 2017
I've added another commit on my example repo (see above), and am now partly reproducing the issue:
Andrew-Stubbs commentedon Dec 6, 2017
The issue seems to be linked to the build containing two copies of the fonts causing issues when compiling in prod mode.
I can reproduce this duplication on my project 100% of the time, but the fonts only fail to show in the browser some of the time, I assume based on the lexicographical order of the duplicated fonts with hash.
This has only started happening since migration to angular-5.0.5, I'm attempting to put together a public MRE now.
Compiling without aot (
--aot=false) or without output hashing media (--output-hashing=bundlesor--output-hashing=none) also stops the duplication of fonts, but neither workaround is particularly appealing for long term production builds.jameslafferty commentedon Dec 6, 2017
In my real-life project passing
--output-hashingdoes remove the duplicate fonts, but doesn't help the Chrome/FF parsing issue for the fonts. (I'm seeing theOTS parsing error: incorrect file size in WOFF headerandFailed to decode downloaded font:messages shown in the screenshot above.)laserus commentedon Dec 11, 2017
@Andrew-Stubbs I tried to downgrade, but same errors happened for angular =5.0.0 for me
pkozlowski-opensource commentedon Mar 7, 2019
Could you please open, with a minimal reproduce scenario, in https://github.com/angular/angular-cli if this is still an issue? Thnx!
angular-automatic-lock-bot commentedon Sep 14, 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.