Angular 2+ rewrite old AngularJS links, fragment problems

problem

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:

http://example.com/oldapp/#/createTeams

to a new:

http://example.com/newapp/teams/create

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 http://example.com/oldapp/#/createTeams the server sees only http://example.com/oldapp/, thus you can't access the rest of the URL to do the proper URL rewriting.

solution

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" />
</rule>

With this in place, the URL http://example.com/oldapp/#/createTeams is now redirected to http://example.com/newapp/redirect#/createTeams, 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.

Gravatar
Author: Dan Dumitru
Last Edit: October 22, 2020
Last Edit October 22, 2020
Created October 22, 2020
Views 41
Tags
Angular
AngularJS

Join us!

Do you like this website?

Bookmark it and come back here to write a post yourself when you run into something shareable.

Early collaborators will get to own a part of the project (5 to 20%)... >> read more

Your Comment

Feel free to post additional info or improvement suggestions.
preview
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](http://a.com)

*italic* **bold**

More Tips