Angular 2: Override Router navigate method

user_1870351 0
Viewed 2419

I want to override the Router::navigate and execute some code directly in a Router class (log for example)

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];


export function routerFactory(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer,
                   rootContexts: ChildrenOutletContexts, location: Location,
                   injector: Injector, loader: NgModuleFactoryLoader,
                   compiler: Compiler, config: Router): Router {

  return new MyRouter(
      rootComponentType,
      urlSerializer,
      rootContexts,
      location,
      injector,
      loader,
      compiler,
      config
  );
}


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    routing,
    ...
  ],
  providers: [
    ...
    {
      provide: Router,
      useFactory: routerFactory,
      deps: [Type, UrlSerializer, ChildrenOutletContexts, Location, Injector, 
             NgModuleFactoryLoader, Compiler, router]
    }
  ],
  bootstrap: [AppComponent]
})

With that code, i have the error:

Error: Can't resolve all parameters for routerFactory: (
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
?)

Did i miss something ? Can i override with factory the Router component ?

Why angular can't inject my routes ?

angular2-routing angular
1 Answers

I managed to override the default angular Router.navigate function using the below code (Angular v6.0.3):

export class MyRouter extends Router {
  constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer,
    rootContexts: ChildrenOutletContexts, location: Location, injector: Injector,
    loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes) {
    super(rootComponentType, urlSerializer, rootContexts, location, injector, loader, compiler, config);
  }
  navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean> {
    ...
    return super.navigate(commands, extras);
  }
}

function flatten<T>(arr: T[][]): T[] {
  return Array.prototype.concat.apply([], arr);
}

export function routerFactory(rootComponentType: Type<any>, urlSerializer: UrlSerializer,
  rootContexts: ChildrenOutletContexts, location: Location, injector: Injector,
  loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[][]): Router {
  return new MyRouter(
    rootComponentType,
    urlSerializer,
    rootContexts,
    location,
    injector,
    loader,
    compiler,
    flatten(config)
  );
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([]),
    ...
  ],
  providers: [
    {
      provide: Router,
      useFactory: routerFactory,
      deps: [ApplicationRef, UrlSerializer, ChildrenOutletContexts, Location, Injector,
        NgModuleFactoryLoader, Compiler, ROUTES]
    },
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
user_42534850
Related