Providing service alias in Angular 7 breaks build execution

Question

I have written a service MyService and a mocked version of it – MyServiceMock, for unit tests providing and using the mocked service's result until my BE is ready.

I used MyService as alias of MyServiceMock, so I will not have to change my code in the future when the BE is ready:

In my services module I use:

import { MyServiceMock as MyService } from './my-service/my-service-mock.service';

const providers: Array<Provider> = [
  MyService,

...

And the same in my components:

import { MyServiceMock as MyService } from './my-service/my-service-mock.service';

...

 constructor(
   myServce: myService,

...

And it worked fine with ng serve and ng build... until I served the build. There was a runtime error in the browser MyService is undefined. But note that when served through Angular ng serve all worked fine. And there were no warnings and errors in the ng build | ng build --prod build processes.

The solution below is simple but I would appreciate any explanations of that.

Thanks!

score 3 · Answer 1 · answered Oct 16 '19 at 09:50

Instead of faking an import you can simply tell Angular to provide your fake service when the real one is requested. A StackBlitz as an example.

in app.module.ts in the providers:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: RealService,
      useClass: FakeService
    }
  ]
})
export class AppModule { }

Now every time the RealService is requested the fake service will be served instead.

score 0 · Answer 2 · answered Oct 16 '19 at 09:31

Solution:

In the services module we provide the mocked service as-is, without alias. And we use alias only in the components:

import { MyServiceMock } from './my-service/my-service-mock.service';

const providers: Array<Provider> = [
  MyServiceMock,

...

Providing service alias in Angular 7 breaks build execution

2 Answers2