broken path/query params

[schmitch]

hello currently I'm observing a problem on ui-router/angular when having a "special" character in my path or query param.
Currently I'm using ui-router/angular with version 2.0.0, the "newest", however it's also reproducible on older versions, see the hello world plunker that I changed: https://plnkr.co/edit/5zgTiwtTCp05Vce545gs
if you click on 'About' you will see a logging output to the browser console.
Normally you should only see resolve once, however it will be called twice.

this only happens when trying to open a url with [uiParams] where one param has a special character (whitespace, etc). the thing is that ui-router correctly decodes the param and I guess that is also the bug.

Currently the second time the route gets called the query parameter is encoded, so calling a transition.params() will only get the encoded version (I guess that is wrong behavior, too).

The bug only happens if you click on a uiSref link, not if you reload the browser with the correct url.

[paulodrade]

Same problem!!!

When I have a path like /login?redirectTo=/channel (that encodes to /login?redirectTo=%2Fchannel) it is triggering twice (include the component). And if I try to refresh the page a couple of times, with this path (/login?redirectTo=%2Fchannel), it keeps re-encoding the path again and again, ending up something like /login?redirectTo=%25252525252525252Fchannel.

[mkoczorowski]

hey you have to set this param to raw:true in param declaration

[fearghalom]

I'm seeing the same issue with @uirouter/angular v5.0.0

[timofei-iatsenko]

I created a workaround which mimics AngularJS behaviour (all parameters not encoded at all), therefore this problem disappears (or just masked)

export class AppModule {
  constructor(private upgrade: UpgradeModule, router: UIRouter) {
    // Set for all router parameters raw: true, to mimic AngularJS behaviour.
    // There is a problem inside ui-router, when raw: false, params urlencoded when written to the browsers location,
    // but not url-decoded when read back, this cause application works unpredictable.
    router.stateRegistry.decorator('params', function customParamBuilder(state: StateObject, parent?: BuilderFunction) {
      const paramsMap: {[name: string]: Param} = parent(state);

      Object.keys(paramsMap).forEach((paramName) => {
        paramsMap[paramName].raw = true;
      });

      return paramsMap;
    });
  }

[timofei-iatsenko]

Or alternative solution (better), override Angular's location strategy and force it to decode uri components:

@Injectable()
export class CustomPathLocationStrategy extends PathLocationStrategy {
  public path(includeHash?: boolean) {
    return decodeURI(super.path(includeHash));
  }
}

// app.module.ts
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    UIRouterModule.forRoot({states: routerStates, useHash: false, otherwise: '/'}),
  ],
  providers: [
    {
      provide: LocationStrategy,
      useClass: CustomPathLocationStrategy,
    },
  ],
})
export class AppModule {}