Hey there! Let's tackle this URL encoding issue you're facing in Angular—Chrome's automatic encoding can definitely throw a wrench in things if you need precise control over how your URLs are formatted. Here are some professional, Angular-native solutions to handle this properly:

Angular uses a default DefaultUrlSerializer to handle URL encoding/decoding, but you can extend this class to tweak behavior to match your needs. For example, if you want to adjust how spaces are encoded (like using %20 instead of +) or prevent encoding of specific characters:

import { UrlSerializer, DefaultUrlSerializer, UrlTree } from '@angular/router';

export class CustomUrlSerializer implements UrlSerializer {
  private defaultSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // Decode the full URL first if you need to parse raw values
    url = decodeURIComponent(url);
    return this.defaultSerializer.parse(url);
  }

  serialize(tree: UrlTree): string {
    let serializedUrl = this.defaultSerializer.serialize(tree);
    // Replace '+' with '%20' for space encoding (common backend expectation)
    serializedUrl = serializedUrl.replace(/\+/g, '%20');
    return serializedUrl;
  }
}

Then register your custom serializer in your app module to make it global:

@NgModule({
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ]
})
export class AppModule { }

When building query parameters for HTTP requests, never manually concatenate strings—use Angular's HttpParams instead. It handles proper encoding automatically while giving you full control over parameter values:

import { HttpParams } from '@angular/common/http';

// Build params safely
const queryParams = new HttpParams()
  .set('search', 'Angular URL encoding 101')
  .set('tags', 'special chars: !@#$%');

// When used in an HTTP call, params are encoded automatically
this.http.get('/api/articles', { params: queryParams }).subscribe(response => {
  // Handle response
});

If you need the raw encoded string (for linking or logging), just call toString() on the HttpParams instance:

const encodedParamsString = queryParams.toString();
// Output: search=Angular%20URL%20encoding%20101&tags=special%20chars%3A%20%21%40%23%24%25

Angular automatically decodes route parameters when you access them via paramMap, but if you need the raw encoded value (e.g., to match a backend's expected format), you can pull it directly from the route's URL segments:

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // Get decoded parameter value (default behavior)
  const decodedProductId = this.route.snapshot.paramMap.get('productId');

  // Get raw encoded segment from the URL
  const encodedSegment = this.route.snapshot.url[0].path;
  const manuallyDecoded = decodeURIComponent(encodedSegment);
}

While it's possible to force unencoded URLs (e.g., using queryParamsHandling: 'preserve' during navigation), this is not recommended. Chrome's automatic encoding follows RFC 3986 standards, and bypassing it can lead to invalid URLs, broken navigation, or security issues. Only do this if you have an explicit, well-documented requirement from your backend team.

Best practice tip: Always lean on Angular's built-in utilities instead of manual string manipulation—this avoids edge cases like double-encoding or missing reserved character handling.

内容的提问来源于stack exchange，提问作者techguy