app.server.ts

import {NgModule} from '@angular/core';
import {Awesome} from './awesome.base';
import {AwesomeServer} from './awesome.server';

@NgModule({
  providers: [
    {provide: Awesome, useClass: AwesomeServer}
  ]
})
export class App {}

awesome.base.ts

export class Awesome {
  constructor(private someOtherService: any) {}
  
  public displayData(): void {
    this.someOtherService.get()
    .map(this.modifyData.bind(this))
    .subscribe(this.renderInScreen.bind(this))
  }
  
  protected modifyData (data: any): any {
    throw 'Not Implmented';
  }
  
  protected renderInScreen(data: any): void {
    throw 'Not Implmented';
  }
}

awesome.browser.ts

import {Awesome} from './awesome.base';

export class AwesomeBrowser extends Awesome {
  protected modifyData (data: any): any {
    // custom logic for browser
    return data;
  }
  
  protected renderInScreen(data: any): void {
    // custom logic for browser
  }
}

awesome.server.ts

import {Awesome} from './awesome.base';

export class AwesomeServer extends Awesome {
  protected modifyData (data: any): any {
    // custom logic for server
    return data;
  }
  
  protected renderInScreen(data: any): void {
    // custom logic for server
  }
}