Question 299338 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add special characters in url in angular 15

I’m upgrading an old application written in Angular JS to latest Angular 15. The migration is smooth but facing problem in urls. Actually our survey url exists like this below and it is different for every survey.
https://some-domain.com/#/77RqxKxiEdXDccBB8S3iahYS9MB4cGqQR9G6XciZKR0+U=

Ass you can see, the url contains ‘+’ and ‘=’. But when I’m using this url in my angular 15 application, it is replacing the special characters and especially removing the ‘=’ from the url.

But in DB, this encrypted id is being stored as an unique identifier and using this only all the details are fetched from DB.

The problem is that I cannot change the url as many previous surveys have been sent to customer with that url.

Any help will be really appreciated.

I’ve tried using some of the help found from google like using URIencode or help from this url
https://stackblitz.com/edit/allowing-angular-4-routes-to-pass-special-charact-ebpsmt?file=src%2Fapp%2Furl-serializer.service.ts

but it is still not working as the ‘=’ is still getting missed from the url.

Tags:

2

Answers


  1. 0

    To prevent special characters like "+" and "=" from being replaced in URLs in Angular 15, you can implement a custom URL serializer. This serializer will handle the encoding of special characters and ensure that they are preserved in the URL.

    Create a custom URL serializer service:

    import { Injectable } from '@angular/core';
import { DefaultUrlSerializer, UrlSegment, UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class CustomUrlSerializer extends DefaultUrlSerializer {
  private _encode(value: string): string {
    return encodeURIComponent(value).replace(/%20/g, '+');
  }

  private _decode(value: string): string {
    return decodeURIComponent(value.replace(/+/g, '%20'));
  }

  override parse(url: string): UrlTree {
    const parsedUrl = super.parse(url);
    const root = parsedUrl.root;
    const children = root.children;
    const newChildren = children.map((segment) => {
      return new UrlSegment(segment.path, segment.parameters.map((param) => {
        return { name: param.name, value: this._decode(param.value) };
      }));
    });
    return new UrlTree(new UrlSegment('', []), root.children, root.queryParams, parsedUrl.query);
  }

  override serialize(urlTree: UrlTree): string {
    const serializedUrl = super.serialize(urlTree);
    return serializedUrl.replace(/%20/g, '+');
  }
}

    Import and configure the custom URL serializer in your app module:

    import { NgModule } from '@angular/core';
import { RouterModule, UrlSerializer } from '@angular/router';
import { CustomUrlSerializer } from './custom-url-serializer.service';

@NgModule({
  imports: [
    RouterModule.forRoot([], {
      urlSerializer: CustomUrlSerializer,
    }),
  ],
})
export class AppModule {}
    Login or Signup to reply.
  2. 0

    In this scenario URL is getting encoded only in browser.
    In your case you can still fetch all the details from DB based on token. You can fetch original token from "ActivatedRoute" of angular router component.

    import { ActivatedRoute, Router } from '@angular/router';

constructor(
  private activatedRoute: ActivatedRoute
 ){}

ngOnInit() {
  // this will fetch original (decoded) token for you
  const token =  this.activatedRoute.snapshot.paramMap.get('token') 
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search