Apple App Site Association conflicting with angular route

Question

Can someone shed some light on how to setup iOs app link to work for angular ? Basically I want to have a link in mail sent to users that then opens the app if it is installed.

I have in the src/.well-known folder added a file called 'apple-app-site-association' with no extension.

When running locally it correctly downloads the file when i go to localhost:4200/.well-known/apple-app-site-association

I have also in the angular.json added "src/.well-known" to the assets.

The web app is deployed to azure static web app, and here when I access the site https://APPNAME.com/./well-known/apple-app-site-association it does not work.

I have also checked apples own tool. https://app-site-association.cdn-apple.com/a/v1/PAGE.com

from reading all over related issues it seems that angular sees /apple-app-site-association as a route and not a .json file and I need to add a MIME type to this?

How do I make the browser understand that this is a file and not a route? do I have to change this in angular somewhere, or do I have to do something in azure static web app?

Answer 1

Thanks to Sampath I found a solution.

If anyone else wants the answer specifically for azure static web app here goes:

With the inspiration from this post I added the apple-app-site-association.json with extenstion to the path so it looks like this: ./well-known/apple-app-site-association.json

Then I created a file staticwebapp.config.json in the root folder of the angular project containing:

{
    "trailingSlash": "auto",
    "routes": [
      {
        "route": "/.well-known/apple-app-site-association",
        "rewrite": "/.well-known/apple-app-site-association.json"
      }
    ],
    "mimeTypes": {
      ".json": "application/json"
    }
  }

Update angular.json to add the config file to the assets array.

"assets": [
            {
              "glob": "./staticwebapp.config.json",
              "input": "./",
              "output": "/"
            },
            "src/favicon.ico",
            "src/.well-known",
            "src/assets",
            "src/routes.json"
          ],

Answer 2

The routing configuration for Azure Static Web Apps should be added to staticwebapp.config.json in the main path, using this DOC.

• The sample code below provides an example of configuring routing in Azure Static Web Apps.
• The code reference is obtained from git.

about.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>

Local:

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"
    }
  }
}

Deployment status in Git Action: Azure: