Issue
UPDATED 7/6/2023 as I believe I have determined the issue is due to the hybrid nature of my application and not just upgrading angular as I previously assumed.
I have a hybrid angular/angularjs app that currently builds all the client files into a /client/
directory.
All calls outside of that directory are handled by my back end. My current configuration uses deployUrl='/client/'
to prefix all asset requests appropriately for that directory.
I am upgrading angular, and so deployUrl
is now deprecated/removed, and I am trying to figure out how to make this continue to work.
I have tried setting my angular.json baseHref='/client/'
, like recommended here:
What is best way to go about replacing 'deployUrl' in angular.json for v13?
and that works fine for the assets, but it breaks the angularjs portion of the app. In particular, when angularjs $location attempts to parse the initial url, it gives an error. Ie, Assume the initial url is https:/example.com/home
, when ajs tries to parse it, it throws this error:
Error: [$location:ipthprfx] Invalid url "https://example.com/home", missing path prefix "https://example.com/client/".
Which links to this error in the angular docs.
Apparently angularjs doesn't like the baseHref, which wasn't previously a problem as deployUrl didn't require a baseHref. However, now that I can't use it, I can't seem to do the workaround of setting baseHref either, since angularjs doesn't work well with it.
Any ideas how I can set up/build my app so that both the angular and angularjs portions work? (Yes, I would love to get rid of all the angularjs code, and we are doing so slowly, but we still have a lot of legacy code in ajs).
Solution
This is how I ended up solving the problem. I am posting this just in case anyone else is interested, though I can't necessarily recommend this solution because $browser is technically a private angularjs object, so it isn't designed to be modified/tweaked, and isn't even documented. However, the solution worked for us, and we are okay with the risk of ajs changing something under the covers and breaking things, particularly because not that many changes are happening to ajs nowadays.
I basically overrode the default $browser.baseHref() method to return '/' rather than the value specified via in the index.html. That way, I could still specify a baseHref during the angular build, so all the client assets/resources/scripts are found correctly, but the angularjs $location behavior and ajs ui router is not confused by it.
I added this to the app config portion of my angularjs bootstrap:
$provide.decorator('$browser', ['$delegate', ($delegate) => {
$delegate.baseHref = function replacementBaseHref() {
return '/';
};
return $delegate;
}]);
Answered By - DavidA
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.