angular2 in-memory-web-api only for a part of an application

[vinagreti]

I was wondering if is possible to configure angular2 in-memory-web-api only for a part of an application. I want to reach external endpoints for finished components and use in-memory-web-api for components in development stage.

I've tried to do this in the folowing two ways:

1 - Loading the data in the main and changing the XHRBackend in the components that I want to reach in-memory endpoints;

main.ts

bootstrap(AppComponent, [
    ...
    { provide: SEED_DATA, useClass: InMemoryDataService }
]);

inDevelopmentStage.service.ts

@Component({
    providers: [
        { provide: XHRBackend, useClass: InMemoryBackendService }
    ]
})

2 - Loading the data and changing the XHRBackend in the components that I want to reach in-memory endpoints;

inDevelopmentStage.service.ts

@Component({
    providers: [
        { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
        { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
    ]
})

Is there any way that I can achieve this goal?

Thanks for your help!

[filipesilva]

Oh sure, you can definitely do this. Each component has it's own injector, which is what resolves providers for itself and all components in that subtree.

Your second example should have worked:

@Component({
    providers: [
        { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
        { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
    ]
})

As for that component and it's subtree, XHRBackend is InMemoryBackendService instead of the service provided by HTTP_PROVIDERS.

Remember that it also applies to any other components in that subtree however. Maybe that's what was going wrong?

[vinagreti]

I'm going to test this approach again. I think may be because the DI
strategy that I was using was wrong. I'll give you a reply ASAP. Thank you
very much!

[vukasin-nikodijevic]

in RC5 this will perfectly fit into @NgModule scope :)

[vinagreti]

I could not get things working by using it inside and child module called Analysis. What I did was import the InMemoryWebApiModule inside a child module and call the http.get from a child service that belongs to that child module.

Child Module

@NgModule({
  ...
  imports: [
    InMemoryWebApiModule.forRoot(AnalysisData) // in memory here
  ],
  providers: [
    AnalysisService // Service here
  ],
})

Child Service

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class AnalysisService {

    constructor(private http: Http){}

    getAnalyses(){
        return this.http.get('app/analysis').toPromise();
    }

}

My route to this child module is:

  { path: 'analysis', component: AnalysisListComponent

And in my app.module I load the Analysis module

@NgModule({
    bootstrap: [
        ...
    ],
    declarations: [
        ...
    ],
    imports: [
        ...
        AnalysisModule, // loading the submodule here

Using this approach, when I reach the app/analysis the app return a 404 error. What am I doing wrong here? How can I reach the analysis in memory endpoint?
If I import the in memory module in the App module and call forRoot there, all of my http requests will pass through in memory service and that is not what I want. I want to use in memory only in a specific service, not even in a module scope, only in a service scope. and if its possible, only in a service method scope.

If you think it is better to use SO to find a solution for this, just say the word.

Thanks.

[wardbell]

It's not really designed for your scenario. It's a Dev and demo tool and we haven't tried to make it super robust.

It might be nice to add a config option that allows for pass-thru of unrecognized routes (we take PRs).

It is also possible (perhaps easy) to reprovide both in mem web api and http services at a component level and then both will be confined to that component and its sub tree.

[vukasin-nikodijevic]

This feature will be very useful in case when you have established contract for new feature with api developers but they are behind you with time schedule.

That way you can start work independently on new feature which will use inMemory Api. Rest of App will use regular api.

Everyone is happy :) - especially project manager :D

[vinagreti]

@wardbell when you said "It is also possible (perhaps easy) to reprovide both in mem web api and http services at a component level and then both will be confined to that component and its sub tree." you are saing that it is already possible or it is only a tip?

I'll try to check your code more deeply to see if I come up with some idea and make a PR.

Feel free to close this issue or leave it open to see how much people need this feature and maybe to get some PR.

Thanks a lot for your help guys!

[wardbell]

See duplicate #30. I think PR #31 will meet your needs.

[vinagreti]

Yes, did meet my needs. I'm already using the passThruUnknownUrl configuration and it is acting like I needed.

Thanks guys!