CODEWITHSUNDEEP
angulartypescriptgoogle-cloud-platformyamlwoff
James
James

Reputation: 749

Failed to decode downloaded font for WOFF, WOFF2 & TTF

https://celbux-frontend-ng.ew.r.appspot.com/

I'm having troubles getting my Angular frontend to work with tim-icons / fa-icons, only after it is deployed to App Engine. I get the following errors:

Failed to decode downloaded font: https://celbux-frontend-ng.ew.r.appspot.com/nucleo.5987dd12fea78ce5f97a.woff2
home:1 OTS parsing error: invalid version tag

home:1 Failed to decode downloaded font: https://celbux-frontend-ng.ew.r.appspot.com/nucleo.f0b489a5dbbff08833d2.woff
home:1 OTS parsing error: invalid version tag

home:1 Failed to decode downloaded font: https://celbux-frontend.ng.ew.r.appspot.com/nucleo.b17a118e13e53558658b.ttf
home:1 OTS parsing error: invalid version tag

The fonts do work when I run the program locally, on http://localhost:4200. These errors only appear once I access the deployed website.

Pretty sure it's due to the how app.yaml handles routing, and I'm quite awful with this. Here is my current app.yaml.

runtime: python27
api_version: 1
threadsafe: true
handlers:

  # Initial route that will serve up index.html, main entry point to your app
  - url: /
    secure: always
    static_files: celbux-frontend-ng/index.html
    upload: celbux-frontend-ng/.*

  # Routing for typedoc, assets and favicon.ico to serve directly
  - url: /((?:assets|docs)/.*|favicon\.ico)
    secure: always
    redirect_http_response_code: 301
    static_files: celbux-frontend-ng/\1
    upload: celbux-frontend-ng/.*

  # Routing for any js files
  - url: /(.*\.js)
    secure: always
    redirect_http_response_code: 301
    static_files: celbux-frontend-ng/\1
    upload: celbux-frontend-ng/.*\.js

  # Routing for any css files
  - url: /(.*\.css)
    secure: always
    redirect_http_response_code: 301
    static_files: celbux-frontend-ng/\1
    mime_type: text/css
    upload: celbux-frontend-ng/.*\.css

  # Routing for anything (wild card) after
  - url: /.*
    secure: always
    static_files: celbux-frontend-ng/index.html
    upload: celbux-frontend-ng/.*

So the question is, how can I get my routing here to work when it is deployed, so I do not get the OTS parsing errors & font decode errors.

Thanks!

My dist folder structure

Upvotes: 0

Views: 2444

Answers (2)

James
James

Reputation: 749

Thanks to @Methkal Khalawi for leading me in the correct direction. The issue I was having with his solution is that all Angular routing would break. This new app.yaml config works perfectly for me.

Working webapp: https://celbux-frontend-ng.ew.r.appspot.com/

runtime: nodejs12

handlers:
  - url: /
    secure: always
    static_files: celbux-frontend-ng/index.html
    upload: celbux-frontend-ng/index.html

  #  Routing rules for resources, css, js, images etc. Any file with format filename.ext
  - url: /(.*\.(.+))$
    secure: always
    static_files: celbux-frontend-ng/\1
    upload: celbux-frontend-ng/(.*\.(.+))$

  #  Routing rule for Angular Routing
  - url: /(.*)
    secure: always
    static_files: celbux-frontend-ng/index.html
    upload: celbux-frontend-ng/index.html

Upvotes: -1

Methkal Khalawi
Methkal Khalawi

Reputation: 2477

try something like this in your app.yaml:

runtime: nodejs12
handlers:
  - url: /
    static_files: dist/index.html
    upload: dist/index.html
  - url: /(.*)
    static_files: dist/\1
    upload: dist/.*

The app.yaml must be at the root of your project

Upvotes: 1

Related Questions