Apple App Site Association 与角度路线冲突

Question

有人可以阐明如何设置 iOs 应用程序链接以适用于 Angular 吗？ 基本上我想在发送给用户的邮件中添加一个链接，然后在安装了该应用程序后打开该应用程序。

我在 src/.well-known 文件夹中添加了一个名为“apple-app-site-association”的文件，没有扩展名。

在本地运行时，当我转到 localhost:4200/.well-known/apple-app-site-association 时，它会正确下载文件

我还在 angular.json 中添加了“src/.well-known”到资产中。

Web应用程序部署到天蓝色静态Web应用程序，当我访问该网站时https://APPNAME.com/./well-known/apple-app-site-association它不起作用。

我还检查了苹果自己的工具。 https://app-site-association.cdn-apple.com/a/v1/PAGE.com

通过阅读所有相关问题，似乎 Angular 将 /apple-app-site-association 视为路由而不是 .json 文件，我需要为此添加 MIME 类型？

如何让浏览器明白这是一个文件而不是路由？我是否必须在某个角度更改此设置，或者我是否必须在 azure 静态 Web 应用程序中执行某些操作？

Answer 1

应使用此 DOC 将 Azure 静态 Web 应用的路由配置添加到主 path 中的 staticwebapp.config.json。

• 下面的示例代码提供了在 Azure 静态 Web 应用中配置路由的示例。
• 代码参考来自git。

关于.component.ts：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {
  concat,
  fromEvent,
  interval,
  noop,
  observable,
  Observable,
  of,
  timer,
  merge,
  Subject,
  BehaviorSubject,
  AsyncSubject,
  ReplaySubject, from
} from 'rxjs';
import {delayWhen, filter, map, take, timeout} from 'rxjs/operators';


@Component({
    selector: 'about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

    ngOnInit() {

    }

  run() {


  }

}

about.component.html：

<div class="not-found">

    <h2>Angular Router In Depth</h2>

    <img class="course-image mat-elevation-z10"
         src="https://angular-university.s3-us-west-1.amazonaws.com/course-images/angular-router-course.jpg">

    <h1>About this course</h1>
    <p>Build large-scale Single Page Applications with the powerful Angular Router</p>

</div>

本地：

staticwebapp.config.json：

{
  "trailingSlash": "auto",
  "routes": [
    {
      "route": "/login",
      "rewrite": "/login.html"
    },
    {
      "route": "/courses",
      "rewrite": "/courses.html",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    }
  ],
  "navigationFallback": {
    "rewrite": "index.html"
  },
  "responseOverrides": {
    "401": {
      "rewrite": "/login.html"
    }
  }
}

Git Action 中的部署状态： 蔚蓝：