无法为 WOFF、WOFF2 和 TTF 解码下载的字体答案

【问题标题】：Failed to decode downloaded font for WOFF, WOFF2 & TTF无法为 WOFF、WOFF2 和 TTF 解码下载的字体
【发布时间】：2021-02-27 17:30:06
【问题描述】：

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

我无法让我的 Angular 前端与 tim-icons / fa-icons 一起工作，只有在它部署到 App Engine 之后。我收到以下错误：

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

当我在 http://localhost:4200 本地运行程序时，字体确实有效。这些错误只有在我访问部署的网站时才会出现。

很确定这是由于 app.yaml 处理路由的方式，我对此感到非常糟糕。这是我当前的 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/.*

所以问题是，我怎样才能让我的路由在部署时在这里工作，所以我没有收到 OTS 解析错误和字体解码错误。

谢谢！

【问题讨论】：

标签： angular typescript google-cloud-platform yaml woff

【解决方案1】：

在你的 app.yaml 中尝试这样的事情：

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

app.yaml 必须位于项目的根目录

【讨论】：

【解决方案2】：

感谢@Methkal Khalawi 引导我朝着正确的方向前进。我在他的解决方案中遇到的问题是所有 Angular 路由都会中断。这个新的 app.yaml 配置非常适合我。

工作网络应用程序：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

【讨论】：