¿Cómo inyectar un servicio diferente basado en cierto entorno de construcción en Angular2?

Ver a continuación mi solución se basa en @peeskillet one.

Cree una interfaz que el servicio mocky real implementen, para su ejemplo IHeroService.

export interface IHeroService {
    getHeroes();
}

export class HeroService implements IHeroService {
    getHeroes() {
    //Implementation goes here
    }
}

export class HeroMockService implements IHeroService {
    getHeroes() {
    //Mock implementation goes here
}

Suponiendo que haya creado la aplicación Angular utilizando Angular-CLI, en su archivo environment.ts agregue la implementación adecuada, por ejemplo:

import { HeroService } from '../app/hero.service';

export const environment = {
  production: false,
  heroService: HeroService
};

Para cada environment.(prod|whatever).ts diferente, debe definir un heroService que apunte a la implementación y agregar la importación.

Ahora, supongamos que desea importar el servicio en la clase AppModule (puede hacerlo en el componente donde también necesita el servicio)

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FormsModule,
    HttpModule,
    AlertModule.forRoot()
  ],
  providers: [
    {
      provide: 'IHeroService',
      useClass: environment.heroService
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

La parte importante es el proveedor:

  providers: [
    {
      provide: 'IHeroService',
      useClass: environment.heroService
    }

Ahora donde quieras usar el servicio tienes que hacer lo siguiente:

import { IHeroService } from './../hero.service';

export class HeroComponent {

constructor(@Inject('IHeroService') private heroService: IHeroService) {}

Fuentes: ¿Es posible inyectar interfaz con angular2? https://medium.com/beautiful-angular/angular-2-and-environment-variables-59c57ba643be http://tattoocoder.com/angular-cli-using-the-environment-option /

Si organiza su código en módulos Angular2, puede crear un módulo adicional para importar servicios burlados, por ejemplo:

@NgModule({
   providers: [
      { provide: HeroService, useClass: HeroMockService }
   ]
})
export class MockModule {}

Suponiendo que declare importación para servicios normales en su módulo principal:

@NgModule({
   providers: [ HeroService ]
})
export class CoreModule {}

Siempre que importe MockModule después de CoreModule, entonces el valor que se inyectará para HeroService token es HeroMockService. Esto se debe a que Angular usará el último valor si hay dos proveedores para el mismo token.

Luego puede personalizar la importación para MockModule basado en cierto valor (que representa el entorno de compilación), por ejemplo:

// Normal imported modules
var importedModules: Array<any> = [
   CoreModule,
   BrowserModule,
   AppRoutingModule
];

if (process.env.ENV === 'mock') {
   console.log('Enabling mocked services.');
   importedModules.push(MockModule);
}

@NgModule({
    imports: importedModules
})
export class AppModule {}

Muchas de estas respuestas son correctas pero fallarán sacudiendo árboles. Los servicios simulados se incluirán como parte de la aplicación final que generalmente no es lo que se desea. Además, no es fácil entrar y salir del modo de simulación.

He creado un ejemplo de trabajo que resuelve estos problemas: https://github.com/westonpace/angular-example-mock-services

1. Para cada servicio, cree una clase abstracta o una interfaz de token de valor. Crear un simulacro servicio y un servicio real que implementa la clase abstracta / interfaz.
2. Cree un MockModule que proporcione todos sus servicios simulados y un RealModule que proporcione todos sus servicios reales (asegúrese de usar el useClass/provide campos para proporcionar la clase interfaz / abstract)
3. En los archivos environment.*.ts apropiados se carga el RealModule o el MockModule
4. Hacer cambios en el archivo angular.json utilizado por angular-cli para crear un nuevo destino de compilación mock que se compila con el mock archivo de entorno que inyecta el MockModule. Cree una nueva configuración serve que sirva la compilación simulada para que pueda hacer ng serve -c mock. Cambie la configuración predeterminada del transportador de modo que utilice el destino de servicio simulado para que ng e2e se ejecute contra sus servicios simulados.

Para aquellos como yo que obtienen el siguiente error:

ERROR in Error encountered resolving symbol values statically.
Function calls are not supported. Consider replacing the function
or lambda with a reference to an exported function

Para mi propósito era para un ErrorHandler:

{
    provide: ErrorHandler,
    useFactory: getErrorHandler,
    deps: [ Injector ]
}
...
export function getErrorHandler(injector: Injector): ErrorHandler {
    if (environment.production) {
        return new MyErrorHandler(injector);
    } else {
        return new ErrorHandler();
    }
}

Una solución grande y simple se proporciona en este post por Luuk G.

Https://hackernoon.com/conditional-module-imports-in-angular-518294aa4cc

En resumen:

let dev = [
StoreDevtoolsModule.instrument({
    maxAge: 10,
  }),
];

// if production clear dev imports and set to prod mode
if (process.env.NODE_ENV === 'production') {
  dev = [];
  enableProdMode();
}

@NgModule({
  bootstrap: [
    Base,
  ],
  declarations: [
    Base,
  ],
  imports: [
    Home,
    RouterModule.forRoot(routes, { useHash: true }),
    StoreModule.forRoot(reducers.reducerToken),
    ...dev,
  ],
  providers: [
  ],
})
export class Root { }

Esto funcionó para mí en Angular 6. Aprovecha el enfoque de interfaz de@void (donde tanto el servicio verdadero como el servicio simulado implementan la interfaz de servicio). La respuesta aceptada omite mencionar que el propósito de una fábrica es devolver una implementación de una interfaz.

Heroservice/heroservice.módulo.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IHeroService } from './ihero.service';
import { HeroService } from './hero.service';
import { MockHeroService } from './mock-hero.service';


@NgModule({
  imports: [
    CommonModule
  ],
})
export class HeroServiceModule {
  static forRoot(mock: boolean): ModuleWithProviders {
    return {
      ngModule: HeroServiceModule ,
      providers: [
        {
          provide: IHeroService,
          useClass: mock ? MockHeroService : HeroService,
        },
      ],
    };
  }
}

App.módulo.ts

import { NgModule, isDevMode } from '@angular/core';
import { HeroServiceModule } from './heroservice/heroservice.module';

// ...

  imports: [
    BrowserModule,
    HttpClientModule,
    // ...
    HeroServiceModule.forRoot(
      isDevMode() // use mock service in dev mode
    ),
  ],

// ...

Algunos/algunos.componente.ts

Importar y utilizar la interfaz como lo haría el servicio real (la implementación se "proporcionará" en tiempo de ejecución).

import { IHeroService } from '../heroservice/iheroservice.service';

// ...

@Inject('IHeroService') no va bien con la producción. En mi caso acabo de hacer esto:

import { Injectable } from '@angular/core';
import * as Priority from 'priority-web-sdk';


@Injectable()
export class PriorityService
{
    priority;
    constructor( ){
        this.priority=Priority;
    }
}

La biblioteca Priority que quería importar no tenía un módulo exportado, así que necesitaba hacer un poco de trampa. Al principio probé la forma @Inject('IHeroService') pero cuando compilé como prod no funcionó.

Espero que ayude a alguien!