Kesalahan Angular 5 Static Injector saat menginjeksi komponen dari modul bersama

Ini file komponen saya. Saya mencoba membuat komponen modal yang dapat digunakan kembali menggunakan modal ng-bootstraps. Saya mendapatkan kesalahan injektor statis ketika mencoba mengimpor komponen berikut dari modul bersama. Saya telah melihat banyak sumber daya lain dan tidak tahu apa yang salah dengan penerapan saya.

   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}`;
        }
      }
    }

Di bawah ini adalah SharedModule yang dideklarasikan dan mengekspor 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 ]
  //   }
  // }
}

Kesalahan injektor statis muncul di sini segera setelah dideklarasikan dalam konstruktor.

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();
  }

File App.module utama

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 { }

person CLR45    schedule 11.02.2018    source sumber


Jawaban (1)


Anda harus mempertimbangkan dua hal:

Aplikasi Anda hanya memiliki satu injektor root yang berisi semua penyedia yang terdaftar dalam array @NgModule.providers dari modul apa pun di aplikasi Anda termasuk AppModule. Setiap Komponen memiliki injektornya sendiri (injektor anak dari injektor root) yang berisi penyedia yang dideklarasikan dalam larik komponen @Component.providers. ketika sudut ingin menyelesaikan dependensi (RightClickService) dari suatu layanan (MainService) dia mencarinya di root injector yang berisi penyedia semua NgModules.

Ketika sudut ingin menyelesaikan dependensi (RightClickService) suatu komponen (RightClickComponent) dia mencarinya di injektor komponen jika tidak ditemukan dia mencarinya di injektor komponen induk jika tidak ditemukan dia akan melakukan hal yang sama sampai dia mencapai root injector jika tidak ditemukan, kesalahan akan terjadi.

Jadi, saya menghadapi masalah yang sama dan itu cukup menjengkelkan tetapi akhirnya masalah tersebut teratasi ketika saya mendefinisikan ketergantungan pada file modul komponen.

PS: Ditafsirkan dari di sini

person Akash Deep Singhal    schedule 06.07.2018