Why does Angular 12 remove equal signs at the end of a url?

Question

I have this url http://localhost:4200/info/NjFhYTgyOWZjODZkMDEwMDEyMDllYjUwOnByZTpubw== but when a load my route, the equal signs disappear from the url and I need that token id (included equal sings) to call an API and get info.

This is the way how I get the url param but those equal signs are not there and the same time, they disappear from the url browser.

When I load the url in the browser, the equal signs disappear from the browser (it removes automatically from the url browser) and obviously, I can not get that equals params into my component.

app-routing.nodule.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'survey',
    loadChildren: () => import('./survey/survey.module').then(m=>m.SurveyModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

survey.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SurveyComponent } from './survey.component';
import { SurveyService } from './survey.service';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [
    { path: ':id', component: SurveyComponent }
];

export const routing: ModuleWithProviders<SurveyModule> = RouterModule.forChild(routes);

@NgModule({
  declarations: [
    SurveyComponent
  ],
  imports: [routing, HttpClientModule],
  providers: [SurveyService],
  
})
export class SurveyModule {}

survey.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.scss']
})
export class SurveyComponent implements OnInit {

  constructor(
    private _surveyService: SurveyService,
    private _route: ActivatedRoute,
  ) { }
  
  ngOnInit(): void {

    this._route.params.subscribe(params => {
      console.log(params) //log the entire params object
      console.log(encodeURIComponent(params['id'])) //log the value of id
    });
  }

}

any suggestion ..?

Answer 1

If you try to set route as a string, then you need to escape = sign. That's because this character has a special meaning in the query string - it separates parameter name from its value. The semicolon (";") and equals ("=") are reserved characters that are often used to delimit parameters and parameter values applicable to that segment.

You could use encodeURIComponent() to escape this behaviour.

console.log(`?x=${encodeURIComponent('NjFhYTgyOWZjODZkMDEwMDEyMDllYjUwOnByZTpubw==')}`);
// expected output: "?x=NjFhYTgyOWZjODZkMDEwMDEyMDllYjUwOnByZTpubw%3D%3D"

Here are some examples how to encodeURI and params with Angular routing: https://stackblitz.com/edit/angular-uri-encode-activated-route-param-7tqhha?file=src%2Fapp%2Fapp.component.ts

To get the current url you would need to read the params

@Component({
  selector: 'app-cars',
  templateUrl: './cars.component.html',
  styleUrls: ['./cars.component.css'],
})
export class CarsComponent implements OnInit {
  survey: string;
  currentURL: string;
  currentURLDecoded: string;
  constructor(private router: Router, private route: ActivatedRoute) {
    let location = window.location;
    console.log(location);
  }

  ngOnInit() {
    this.survey = this.route.snapshot.paramMap.get('survey'); // Snapshot param
    this.currentURL = this.router.url;

    this.router.events.subscribe((val) => {
      this.currentURL = this.router.url; // Update the value when a different route is accessed
      const lastPart = this.router.url.split('/').pop();
      this.currentURLDecoded = decodeURIComponent(lastPart);
    });
  }
}

Current URL: /info/NjFhYTgyOWZjODZkMDEwMDEyMDllYjUwOnByZTpubw%3D%3D
currentURLDecoded URL: NjFhYTgyOWZjODZkMDEwMDEyMDllYjUwOnByZTpubw==

Here is a working example: https://stackblitz.com/edit/angular-access-url-params-snapshot-bhmr6m?file=src%2Fapp%2Fcars%2Fcars.component.ts