Background:
A project I am working on needs to access photos from a system we've recently updated from AngularJs to Angular 16. Originally, we served these photos from a virtual directory, like https://myawesomesite/photos/{photonamehere}.jpg Not only did photos in that path appear in the actual application, we were able to send those URLs to applications that draw off the data our app governs and basically centralize all the photos related to the app's domain.
Problem:
When we changed to Angular 16 this stopped working. When one would attempt to directly navigate to a photo URL like above, one would simply be bounced to our application's frame with the NG04002 routing error.
Because these photos live outside of our SPA, we need to ensure that routes patterned like ./photos/*.* are excluded from Angular's routing system in our app.
Research:
I've looked through a number of StackOverflow questions like this one, and these sorts of questions inevitably refer back to the official Angular documentation on Asset Configuration. What I believe I need to do is, in angular.json, add the following block under the architect/build/options/assets array:
{
glob: "photos/*",
input: "./photos/",
output: "./photos/"
}
...However, the documentation is very unclear about what precisely someone needs to do to ignore a part of a route, which means https://myawesomesite/photos/*.*. Further, the way the documentation is worded simply doesn't make sense to me; I'm aware that the glob property is a special, Angular specific path syntax relative to input, and that output is a path relative to whatever the output directory for the project is, it's not clear how this works together and how to write a well-formed asset array entry. Worse, Googling for examples of this doesn't really turn up any results, or at least I'm not searching on the correct terms to get results on how to do what I'm trying to do.
While I'd happily ask for the Angular team to make that particular documentation more readable for someone trying to quickly solve problems, all of this leads to my question...
Question:
In what way can I get Angular to ignore a folder of static assets that hangs off of the root URL by way of being a virtual folder? Is what I've settled on from my research correct or close to correct, or is there a different and better way to do this, without dumping everything into some kind of an assets that lives within the Angular project?
So, the resolution to my problem was external to any of the code I wrote.
The short version of what was going on, was that there was a configuration issue in how the virtual /photos directory had been set up, compared to how it used to be - my shop has some ongoing infrastructure changes we're making at the moment.
I'm not sure of the exact order of operations or the mechanisms in play, but it seems like an external resource that exists with an absolute URL based in your project, but that appears in your virtual directory (https://myawesomesite/photos/myradphoto.jpg) will appear if it's present.
If it's not present, then either the browser or Angular itself appears to attempt to employ its routing systems to try to do a navigation. If however /photos/myradphoto.jpg isn't a valid route - and, it probably won't be - then you get the technically correct NG04002 error.
So, if your photos don't show up and you get a broken SPA, two key debugging steps are: