ข้อผิดพลาด Angular 5 Static Injector เมื่อฉีดส่วนประกอบจากโมดูลที่ใช้ร่วมกัน

นี่คือไฟล์ส่วนประกอบของฉัน ฉันกำลังพยายามสร้างส่วนประกอบ modal ที่นำมาใช้ซ้ำได้โดยใช้ modal ng-bootstraps ฉันได้รับข้อผิดพลาดหัวฉีดคงที่เมื่อฉันพยายามนำเข้าส่วนประกอบต่อไปนี้จากโมดูลที่ใช้ร่วมกัน ฉันได้ดูแหล่งข้อมูลอื่นๆ มากมายแล้ว และไม่สามารถระบุได้ว่ามีอะไรผิดปกติกับการใช้งานของฉัน

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

ด้านล่างนี้คือ SharedModule ที่กำลังประกาศและส่งออก 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 ]
  //   }
  // }
}

ข้อผิดพลาดของหัวฉีดแบบคงที่จะถูกส่งมาที่นี่ทันทีที่มีการประกาศภายในตัวสร้าง

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

ไฟล์ App.module หลัก

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 แหล่งที่มา


คำตอบ (1)


คุณต้องพิจารณาสองสิ่ง:

แอปของคุณมีรูตอินเจคเตอร์เพียงตัวเดียวที่มีผู้ให้บริการทั้งหมดที่อยู่ในอาร์เรย์ @NgModule.providers ของโมดูลใดๆ ในแอปของคุณ รวมถึง AppModule แต่ละส่วนประกอบมีหัวฉีดของตัวเอง (หัวฉีดย่อยของหัวฉีดรูท) ซึ่งมีผู้ให้บริการที่ประกาศในอาร์เรย์ @Component.providers ของส่วนประกอบ เมื่อเชิงมุมต้องการแก้ไขการพึ่งพา (RightClickService) ของบริการ (MainService) เขาจะค้นหามันใน root injector ซึ่งมีผู้ให้บริการของ NgModules ทั้งหมด

เมื่อเชิงมุมต้องการแก้ไขการขึ้นต่อกัน (RightClickService) ของส่วนประกอบ (RightClickComponent) เขาค้นหามันในหัวฉีดส่วนประกอบหากไม่พบ เขาค้นหามันในหัวฉีดส่วนประกอบหลักหากไม่พบเขาจะทำเช่นเดียวกันจนกว่าเขาจะไปถึงรูทหัวฉีดหาก ไม่พบข้อผิดพลาดจะถูกโยนทิ้ง

ดังนั้นฉันจึงประสบปัญหาเดียวกันและค่อนข้างน่ารำคาญ แต่ในที่สุดปัญหาก็ได้รับการแก้ไขเมื่อฉันกำหนดการขึ้นต่อกันในไฟล์โมดูลส่วนประกอบ

PS: ตีความจากที่นี่

person Akash Deep Singhal    schedule 06.07.2018