Azure - Apple App Site Association conflicting with angular route

SidneySchultz
January 25, 2024
173 views
1 vote
2 Answers

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?

Answers

Chosen as BEST ANSWER
- SidneySchultz
- January 8, 2024 at 11:50 am
- 0 votes
0
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"
          ],
```

(Edit)

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: