Angular App Rewrite URL after App is loaded-CodePudding

I have a customer with a running angular app without the source code. We are in the middle of re-writing the app, but there is an urgent need to change the content of one of the pages.

I have "saved as..." the page to get some raw HTML and I am able to load the page on the site. Now, I need to be able to redirect any calls to the old page to the new page. This works fine with a redirect rule with IIS if that page is the first page requested, but all other routes to that page are still handled by the Angular Router and the IIS rule is not used.

Is there any trickery that will allow me to bypass the Angular router for this one page?

CodePudding user response：

I think you should be able to pull this off.

In theory you could get the redirect rule to redirect ANY url to any other url (even before it hits the angular app or anything else).

It's possible you need to configure the IIS on the root directory? And/or move the web.config file to the root directory, that should enable it for every route I believe..

Or it could be an issue of your rule not being correct. Make sure that the rule isn't just rerouting 1 route, but all of them, and you should be good to go with just IIS.

Here is an example for the web.config rule:

 <rule name="CanonicalHostNameRule1">
                <match url="(.*)" />
                <conditions>
                    <add input="{HTTP_HOST}" pattern="^www\.oldurl\.com$" negate="true" />
                </conditions>
                <action type="Redirect" url="https://www.newurl.com/{R:1}" />
            </rule>

Here is another rule that takes any incoming route with /X.html and reroutes it to just /X

<rule name="extensionless" stopProcessing="true">
                <match url="(.*)\.html$" />
                <action type="Redirect" url="{R:1}" redirectType="Permanent" />
            </rule>

CodePudding user response：

I was able to come across some javascript to do what I wanted. It may not be 100% efficient or clean, but it only has to work for a little bit. This goes in the index.html page.

<script>
var oldHref = document.location.href;

window.onload = function() {
var bodyList = document.querySelector("body")

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            
    if (document.location.href == "*yoursite*/*oldpage*"){
        window.location.replace("*yoursite*/*newpage*");
    }
        }
    });
});

var config = {
    childList: true,
    subtree: true
};

observer.observe(bodyList, config);
};

</script>