1

I am creating a shared library for Angular 2 projects. I can add classes and UI components to the library and use them in another project without a problem. However, when I create a service provider, I am unsure of how to inject for example the http dependency.

I made a demo shared lib here to provide an example of what I am doing. This lib is linked (via npm link) to another project (an Ionic 2 starter project).

I have created a sample class in the Socius shared lib to make an http call to Wikidata. A normal constructor for a provider class which I would use from a regular project would be like this:

@Injectable()
export class Wikidata {
     constructor(public http: Http)

Using it this way creates a runtime error: Can't resolve all parameters for TutorialPage: (NavController, MenuController, TranslateService, ?).

I also saw some example using this syntax:

constructor(@Inject(Http) public http: Http) {

This will generate the same runtime error.

Following an answer to this StackOverflow question I tried this:

private wikidata: Wikidata;
    constructor(injector:Injector) {
          setTimeout(() => this.wikidata = injector.get(Wikidata));
    }

Using this method causes a new error:

EXCEPTION: Token must be defined!

What is the correct way to use a class that has a dependency like this?

Community
  • 1
  • 1
curchod
  • 271
  • 1
  • 3
  • 16
  • Added Injectable to service providers array of module? – qwerty_igor Feb 20 '17 at 02:43
  • Hi @qwerty_igor, do you mean add the Angular Injectable class to the providers module of the shared lib, or the project that uses the library? Or do you mean add the Wikidata class to the providers array of the client project? Anyhow, I tried both ... [here is one attempt](https://github.com/timofeysie/heat-wave/commit/7b335c923e3f0965bf13a29c05a5466f717229d2) – curchod Feb 20 '17 at 03:43
  • thought I could build your project. but getting a long list of errors so far. Basically. if you want another library in your project, which will be library = module. you'd need make that module and add all their components and providers in that module then you'd just import that module (library) to the imports section of your heat-wave module. it should work. I'll let you know if I can run your project and see what's up. other than that, sorry not much I can do to help – qwerty_igor Feb 20 '17 at 04:08
  • I've managed to run your project by inserting socius files inside the folder. for the errors I've received it was that it couldn't find wikidata in your tutorial component. so I imported Wikidata straight from providers folder of socius and it worked. Since it's a service I just added it to providers array. not imports or exports, and just imported it straight from the source when needed. – qwerty_igor Feb 20 '17 at 04:42
  • Thanks @qwerty_igor. I was able to get that to work also. With three different ways of using the different components from the shared lib, it's a little confusing. Why don't you answer this question so I can mark it as the correct solution? – curchod Feb 20 '17 at 05:13

1 Answers1

2

Not sure how to answer this one properly:) All I know, is that services don not need to be imported exported in the module. Just add them to the provider of library module and import it to 'imports' statement as the whole module. After that whenever you need to inject it you'd still need to go straight for the source of this injectable wikidata, import it in the file and that should work.

qwerty_igor
  • 919
  • 8
  • 14
  • [This commit](https://github.com/timofeysie/heat-wave/commit/84f0d1ce0ce5ac888b8f5a77b8023102eac9da63) shows the working solution. Putting the full path to the service for the import works. – curchod Feb 20 '17 at 05:28