'Preventing Angular from running when accessing static files with no extension

I have an Ionic/Angular PWA for a project, which has a native (Ionic Cordova) app as well for mobile. On the app we need to accept deeplinks that will have the same URL as the PWA (so you can access from PC and from mobile using the same link).

For iOS deeplinks ("universal links" as they call them) to work, the TLD needs to provide some file called apple-app-site-association (without extension), at the root folder or inside the .well-known path. Same goes for Android, but with a file called assetlinks.json (although in this case it is not really necessary for this to work, it is just there to comply with some Android guidelines).

The thing is, when I try to access the iOS file, my PWA opens up and catches it as a route and redirects to the home page. With the Android file it works well though, since it has an extension and Angular (or the hosting server) recognizes that the browser wants to access some static file.

I have looked this up throughout the internet and could not find any solution...

The website is hosted on an IIS server, and I have tried some settings fixes on the web.config file such as rewriting the path to an identical file with a .json extension and another one I do not seem to remember right now.

I did try all the combinations I could think of for the routes in the src/app-routing.module.ts file as well. If there is a wildcard route it will be matched and redirected to wherever is specified. If not, I get an Error: Cannot match any routes. URL Segment: '.well-known/apple-app-site-association'.

Solution 1:^[1]

If you read about universal links you will learn that the concept is: the hosting site for your app serves apple-app-site-association to connect the url to your iOS app. Setting this up for static websites is straightforward. But for Spa apps this can be quite difficult. For example, with Angular, it is easy to configure static content via angular.json. But, when that static content does not have a file extension, it no longer works ? (gets forwarded to Angular routing, which is not what you want).

So, in the case of an Spa, what you really need to do is setup some additional infrastructure in front of your app. This additional universal-link infrastructure is just a minimal website accessed using a different url from your app-url.

The universal-link url is what you promote to your user base. When the universal-link site is accessed, if the user is on a mobile device, the apple-app-site-associations file is returned to the device and used to open the associated native app. If the user is not on a mobile device, then the web-app that is configured for the universal link is opened.

I am including a simple illustration of this here. This explanation is not intended to be exhaustive, rather to point you (who have become stuck) in the right direction. The use-case in the diagram is for the Firebase implementation of universal links -- Dynamic links

Some good resources for universal links:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Preventing Angular from running when accessing static files with no extension

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]