0

I have written a SharedModule to share common pipes, directives and components across multiple modules. Now I have to move a component to the SharedModule to use it in multiple modules which also gets a service injected.

This is the error I am getting:

EXCEPTION: Uncaught (in promise): Error: Can't resolve all parameters for ChooseArticleModalComponent: (Http, ?).

The component was working just fine with the service injected outside of the SharedModule in an other module.

The service I want to inject is defined in the AppModule (Root Module), so from what I understand it should be global available in my application.

article.service.ts

import { Injectable } from '@angular/core';
import { Article, ProductCategorie } from '../_models/index';
@Injectable()
export class ArticleService {
    getAllProduktCategoriesForArticles(articles: Article[]): ProductCategorie[] {
        …
        return productCategories;
    }
}

shared.module.ts

import { ChooseArticleModalComponent } from '../inquiry/inquiry-create-choose-articles/choose-article-modal/choose-article-modal.component.ts';
…
@NgModule({
    imports: [
…
    ],
    declarations: [
…
        ChooseArticleModalComponent,
    ],
    exports: [
…
        ChooseArticleModalComponent
    ],
})
export class SharedModule {
}

app.module.ts

import { NgModule, ApplicationRef, ViewContainerRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
…
import { ArticleService } from './_services/article.service';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    ErrorComponent
  ],
  imports: [ 
    BrowserModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
  ],
  providers: [ 
    ArticleService,
    …
  ]
})
export class AppModule {
…
}

choose-article-modal.component.ts

import { Component, ViewChild, OnInit, Input, Output, EventEmitter, Inject } from '@angular/core';
import { Http } from '@angular/http';

import { ArticleService } from '../../../_services/index';

@Component({
  selector: 'choose-article-modal',
  templateUrl: './choose-article-modal.template.html',
})
export class ChooseArticleModalComponent {
…
  constructor(private http: Http, private articleService: ArticleService) {
…
  }
…
}

I injected the Http service only to test if angular services would work and they seem to be injected properly.

What needs to be modified to resolve this issue?

I am using angular2 final

All my modules except the SharedModule are imported like this:

export const ROUTES: Routes = [ {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')}
}];
Kelvyn Ornette Sol Marte
  • 11
  • 3
  • This seems to be a similar issue, however the solution does not help me with my problem: http://stackoverflow.com/questions/39488617/understanding-angular2-dependency-injection-in-modules – Kelvyn Ornette Sol Marte Nov 17 '16 at 10:31
  • have you added `ArticleService` inside your `SharedModule`'s providers declaration ? – ranakrunal9 Nov 17 '16 at 10:38
  • Did you import `SharedModule` in `AppModule`? It's not there in your code... – Sasxa Nov 17 '16 at 10:43
  • @ranakrunal9 no its not since its in my AppModule … Should it be in the SharedModule too? – I just tried it quickly it did not seem to change the issue … probably a SharedModule.forRoot() function would be the clean version, but I also tried that – Kelvyn Ornette Sol Marte Nov 17 '16 at 10:49
  • @Sasxa I did not import it but I have now, still seems to be the same issue – Kelvyn Ornette Sol Marte Nov 17 '16 at 10:52
  • We declare `SharedModule` to share its component, service and pipes into all other module so we have to import `SharedModule` into all other modules. In your case first you have to add `ArticleService` inside your `SharedModule`'s providers declaration and then need to import `SharedModule` inside your `AppModule` – ranakrunal9 Nov 17 '16 at 10:55
  • @ranakrunal9 thanks, ok I added the ArticleService to the providers of the SharedModule and imported the SharedModule inside of the AppModule – sadly I still get the same error message – but should there really be a difference between importing a service inside the AppModule or the SharedModule? – without lazy loading, both ways the service should be global from my understanding – Kelvyn Ornette Sol Marte Nov 17 '16 at 11:04
  • I found a solution I included the ArticleService via an index.ts file in choose-article-modal.component.ts and this did not work anymore when moving the the component to the SharedModule. I changed it to `import { ArticleService } from '../../../_services/article.service';` and now it works. I still dont know why this problem occurs only in the SharedModule though – Kelvyn Ornette Sol Marte Nov 17 '16 at 13:42

0 Answers0