angular - Feil: "Møtte udefinert leverandør! Vanligvis betyr dette at du har sirkulære avhengigheter"

Her er en litt ubrukelig feil jeg får i Angular/TypeScript-applikasjonen min. Inntil noen gjør feilmeldingen bedre, hva kan vi gjøre med dette? Hva er de mest sannsynlige situasjonene som får dette til å skje?

Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
    at Object.syntaxError 
    at eval     at Array.forEach (native) [<root>]
    at CompileMetadataResolver._getProvidersMetadata 
    at CompileMetadataResolver.getNgModuleMetadata 
    at CompileMetadataResolver.getNgModuleSummary 
    at eval 
...

Svar #1

Det er veldig vanskelig å vite ut fra feilmeldingen hvilken leverandør som forårsaker dette problemet. Måten jeg klarte å feilsøke dette på er følgende:

  • Jeg gikk inn i node_modules@angular\compiler\bundles\compiler.umd.js-filen
  • Jeg fant linjen der det står: "Oppdaget udefinert leverandør! Dette betyr vanligvis at du har sirkulære avhengigheter. Dette kan være forårsaket av bruk av 'barrel' index.ts-filer."
  • En linje før la jeg til console.log('type', type); for å se i hvilken fil den udefinerte provideren er (Du kan også logge andre relevante variabler der).
  • I den relevante filen fant jeg 'barrel'-importen som forårsaket problemet, og erstattet den med import av eksakt filsti.

Svar #2

For meg, jeg bare starter ng serve på nytt

Svar #3

En mulighet er å prøve å deklarere en tjeneste og modul i samme fil, og deklarere modulen før tjenesten:

import {Injectable, NgModule} from '@angular/core';

@NgModule({providers: [FooService]}) // WRONG: used before declared
export class FooModule {
}

@Injectable()
export class FooService {
}

Du kan fikse dette ved å deklarere tjenesten først, eller du kan bruke forwardRef slik:

import {forwardRef, Injectable, NgModule} from '@angular/core';

@NgModule({providers: [forwardRef(() => FooService)]})
export class FooModule {
}

@Injectable()
export class FooService {
}

Relaterte artikler