Angular 5 Static Injector error when injecting a component from a sharedmodule

Question

Here is my component file. I am trying to create a reusable modal component using ng-bootstraps modal. I am getting a static injector error when I try to import the following component from the shared module. I have looked at many other resources and cannot figure out what is wrong with my implementation.

   import {Component} from '@angular/core';

    import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

    @Component({
      selector: 'ngbd-modal-basic',
      templateUrl: './customM.component.html'
    })
    export class CustomModalComponent {
      closeResult: string;

      constructor(private modalService: NgbModal) {}

      open(content) {
        this.modalService.open(content).result.then((result) => {
          this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
      }

      private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
          return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
          return 'by clicking on a backdrop';
        } else {
          return  `with: ${reason}`;
        }
      }
    }

Below is the SharedModule being declared and exporting the ModalComponent.

import { NgModule  } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoaderComponent } from './loader/loader.component';

import * as Shared from './index'; 

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    LoaderComponent,
    Shared.CustomModalComponent
  ],
  exports: [
    LoaderComponent,
    Shared.CustomModalComponent
  ],
  providers: []
})
export class SharedModule { 
  // static forRoot() : ModuleWithProviders {
  //   return {
  //     ngModule: SharedModule,
  //     providers: [ WebsocketService ]
  //   }
  // }
}

The static injector error gets thrown here as soon as it is declared within the constructor.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';

import { environment } from '@env/environment';
import { Logger, I18nService, AuthenticationService } from '@app/core';

import { CustomModalComponent } from '../shared/_directives/custom-modal/customM.component';

const log = new Logger('Login');

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  version: string = environment.version;
  error: string;
  loginForm: FormGroup;
  isLoading = false;

  constructor(private router: Router,
              private formBuilder: FormBuilder,
              private i18nService: I18nService,
              private authenticationService: AuthenticationService,
              private c: CustomModalComponent) {
    this.createForm();
  }

Main App.module file

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HomeModule } from './home/home.module';
import { AboutModule } from './about/about.module';
import { LoginModule } from './login/login.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    FormsModule,
    HttpModule,
    TranslateModule.forRoot(),
    NgbModule.forRoot(),
    CoreModule,
    SharedModule,
    HomeModule,
    AboutModule,
    LoginModule,
    NgxChartsModule,
    AppRoutingModule
  ],
  declarations: [AppComponent],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

score 2 · Accepted Answer · answered Jul 06 '18 at 17:26

You must consider two things:

Your app has only one root injector that contains all providers delcared in @NgModule.providers array of any module in your app including AppModule. Each Component has its own injector (child injector of the root injector) that contains providers declared in @Component.providers array of the component. when angular want to resolve dependencies (RightClickService) of a service (MainService) he looks for it in the root injector which contains providers of all NgModules.

When angular want to resolve dependencies (RightClickService) of a component (RightClickComponent) he looks for it in the component injector if not found he looks for it in the parent component injector if not found he will do the same until he reaches the root injector if not found an error will be thrown.

So, I was facing the same problem and it was pretty irritating but finally the issue was resolved when I defined the dependency in the component module file.

PS: Interpreted from here

Angular 5 Static Injector error when injecting a component from a sharedmodule

1 Answers1