title: Angular injecting different service implementation to a child module
body: <p>I have a class implementing ErrorHandler and is provided at root level. I have 3 modules in my app of which 2 of them can use ErrorHandler at root level but one of them should have different version of ErrorHandler.</p>
  
  <p>I have tried creating two implementations of ErrorHandler, one of which is provided at root level, I have decorated second service with {providedIn: ThreePageModule}, but this doesn't seems like working as whenever there is an error ex: HttpErrorResponse the root level ErrorHandler kicks in. I have looked at the angular documentation and it says when a child Module is lazy loaded it gets the provided service. Am I missing something here??</p>
  
  <p>Below is the app.module.ts</p>
  
  <pre><code>@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
  FormsModule,
  BrowserModule,
  HttpClientModule,
  AppRoutingModule
  ],
  providers: [
   ....other services...
  {
    provide: HTTP_INTERCEPTORS,
    useClass: HttpConfigInterceptor,
    multi: true
  },
  { provide: ErrorHandler, useClass: ExceptionHandlerService },
  ],
  bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>AppRoutingModule.ts:</p>
  
  <pre><code>@NgModule({
  imports: [
   RouterModule.forRoot(appRoutes)
  ],
  exports: [
   RouterModule
  ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>appRoutes.ts:</p>
  
  <pre><code> export const appRoutes: Routes = [
     {
      path: 'one',
      loadChildren: './../one/one.module#OnePageModule'
   },
    {
        path: 'two',
        loadChildren: './../two/two.module#TwosPageModule'
    },
    {
      path: 'three',
      loadChildren: './../three/three.module#ThreePageModule'
    }
   ];
  </code></pre>
  
  <p>ThreeModule.ts</p>
  
  <pre><code>@NgModule({
  imports: [
   ...Imports...
  ],
  entryComponents: [
   ThreeComponent
  ],
  providers: [DatePipe],
  declarations: [
  ....Declarations.....
  ]
  })
  export class ClaimsPageModule { }
  </code></pre>
  
  <p>ThreeErrorHandlerService.ts</p>
  
  <pre><code>@Injectable({
    providedIn: ThreePageModule
  })
  export class ThreeErrorHandlerService implements ErrorHandler {
  
  constructor() { }
  
  handleError(error: Error | HttpErrorResponse): void {
    if (error instanceof HttpErrorResponse) {
     return;
    }
   }
  }
  </code></pre>
  
  <p>What I want is to use ThreeErrorHandlerService in ThreePageModule while still using ExceptionHandlerService in rest of the two modules.</p>
  
  <p>Is this the way we achieve it or am I doing it wrongly. </p>