apple-app-site-association served as static file in angular 7

user_7102271 0
Viewed 891

I see similar topics but nothing same as my issue, I hope some of you can help me.

Let's start.

I'm running angular 7 with SSR, I have implemented also apple-app-site-association (file was placed in the root of the project) but it stopped working or it was never working but nobody noticed it till now heh.

The problem in logs:

Error: Cannot match any routes. URL Segment: 'apple-app-site-association'

I started checking everything and when I wanted to get this file thru direct url I couldn't retrieve it. I checked situation with robots.txt and in this case I got the file so it is strongly connected with serving that file.

I have moved this file under .well-known/ folder with rules:

"glob": "**/*",
"input": "src/.well-known",
"output": "/.well-known"

Then with postman and request localhost:4000/.well-known/apple-app-site-association I got the right content.

After that, I created test file and test2.txt, and after setting direct rules for them like:

"glob": "file",
"input": "src",
"output": "/"

and

"glob": "file2.txt",
"input": "src",
"output": "/"

I was able to just see the content of file2.txt

According to https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html it is possible to place this file in the root or in a subfolder like .well-known

So the main question is why I cannot serve file without an extension, I tried some options with glob but without any positive result, like:

"glob": "**/apple-app-site-association"
"glob": "*/apple-app-site-association"
"glob": "apple-app-site-*"

Is there any rule that we cannot serve files without extension in the root in angular 7? If not then how to do that correctly with angular.json file.

I would appreciate all ideas.

angular7 ios-universal-links
1 Answers

To serve apple-app-site-association in the root, you need to place that file into a folder.

For example I put apple-app-site-association inside .apple folder, so my angular.json config looks like this:

{
  "glob": "**/*",
  "input": "src/.apple",
  "output": "/"
}

The reason why you need that is because Angular config counts globe path "*/apple-app-site-association" as folder (since no file extension was not provided). As a result, it can find it.

user_92964790
Related