New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts defined in shared directly doesn't get loaded due to 404 #13118

Closed
zlepper opened this Issue Dec 3, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@zlepper

zlepper commented Dec 3, 2018

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

C:\dev\work\test\scss-import-issue>node --version
v8.9.4

C:\dev\work\test\scss-import-issue>npm --version
6.4.1

C:\dev\work\test\scss-import-issue>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.1.0
Node: 8.9.4
OS: win32 x64
Angular: 7.1.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.11.0
@angular-devkit/build-optimizer   0.11.0
@angular-devkit/build-webpack     0.11.0
@angular-devkit/core              7.1.0
@angular-devkit/schematics        7.1.0
@angular/cli                      7.1.0
@ngtools/webpack                  7.1.0
@schematics/angular               7.1.0
@schematics/update                0.11.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Windows 10 pro. 

Repro steps

Repro: https://github.com/zlepper/scss-import-issue

run ng serve.
Open a browser to localhost:4200, see that Avenir Next font doesn't load due to 404.

The log given by the failure

Nothing unusual in the log. So apparently webpack does find the font-file

Mention any other details that might be useful

This issue doesn't happen for @angular-devkit/build-angular version 0.8.8.

@ngbot ngbot bot added this to the needsTriage milestone Dec 3, 2018

@alan-agius4

This comment has been minimized.

Collaborator

alan-agius4 commented Dec 3, 2018

Hi, I have looked at this and it looks that you are using ~/ to resolve the font files. This is equivalent to /shared-assets.

When using this pattern, the CLI will won't process the files, and is up to the user to provide it in the dist. A way to do this is via the assets option in your angular.json.

Alternatively the recommended approach is to use relative paths, so instead of ~/ you should use ../. Remember that in SCSS relative paths are relative to the stylesheet entrypoint and not to the partial scss file.

@alan-agius4 alan-agius4 closed this Dec 3, 2018

@zlepper

This comment has been minimized.

zlepper commented Dec 3, 2018

Neither of those works. If you look in the angular.json file, you will also see the font files being provided as assets.

Again, this is something that worked previously.

EDIT: wth, so the relative path I tried with previously didn't work, yet ../ does.. Odd, while do some more investigation on our main project.

EDIT2: Yep, i'm apparently an idiot. Still doesn't appreciate existing behavior breaking...

@alan-agius4

This comment has been minimized.

Collaborator

alan-agius4 commented Dec 3, 2018

@zlepper, I highly doubt this worked in 0.8.8. Usually when using ~/ it will try to resolve in node_modules which should result in an exception like Can't resolve '../node_modules/shared-assets/fonts

@clydin

This comment has been minimized.

Member

clydin commented Dec 3, 2018

Based on the asset configuration in angular.json, the $shared-asset-location should be /assets.

Also of note is that only woff and woff2 are really needed. The minimum browser versions supported by angular both support those two formats.

@clydin

This comment has been minimized.

Member

clydin commented Dec 3, 2018

The asset configuration also appears to be copying the scss file into the output directory.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment