Angular 2+ rewrite old AngularJS links, fragment problems


Many projects are being migrated from AngularJS to Angular 2+. While doing such a migration, I had to make sure that links to the older AngularJS app are correctly redirected / rewritten to the new structure of the Angular 10 app.

So I needed to redirect URLs like:

to a new:

The URLs for both apps had a base start, oldapp and newapp are not the actual ones, I'm using them here just as examples.

As we were using IIS to host our apps, the first idea was to do the rewriting in IIS, as rewrite rules in web.config using the URL Rewriter module.

The problem with that is that everything in the URL after the hash (#), the fragment, is not sent to the server, so from the server sees only, thus you can't access the rest of the URL to do the proper URL rewriting.


The only solution was to make the bulk of the rewriting on the client side.

If you do a redirect on the server, the fragment after the hash is still kept on the client.

So we added a redirect rule on the server to make the requests to the old app go to the new app, on a specific page, with a rule in IIS (documentation) like:

<rule name="Redirect old AngularJS URLs">
  <match url="^oldapp" />
  <action type="Redirect" url="newapp/redirect" />

With this in place, the URL is now redirected to, so it's now hitting the new Angular 10 app and it includes the fragment information (what's after the hash).

Now, in the Angular app, on the redirect page, you can access the fragment with:

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
    const fragment = this.route.snapshot.fragment;
    // this gives you '/createTeams' in this example

, and do the necessary redirect logic based on your needs.

Author: Dan Dumitru
Last Edit: October 22, 2020
Last Edit October 22, 2020
Created October 22, 2020

Pay it forward!

Did this solution help you? You can pay it forward and write a solution here yourself, when you have one, helping future Googlers... >> read more

Your Comment

Feel free to post additional info or improvement suggestions.
Optional, never shown, displays gravatar.

Formatting Tips

This editor uses Markdown to easily add code in your posts.

Triple backticks for full line(s) of code (or indent 4 spaces)

let foo = 'bar';

[link text](

*italic* **bold**

More Tips