[英]Angular 4: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS
I know, this question may sound duplicate and I have tried everything found on stackover flow unable to resolve this problem, so please bear with me 我知道,这个问题可能听起来很复杂,我已经尝试了在stackover流程中发现的所有内容都无法解决这个问题,所以请耐心等待
To make you able to reproduce the error I am providing you the whole code thought this 为了让你能够重现错误,我为你提供了整个代码
Problem 问题
I am getting the following error: 我收到以下错误:
Provider parse errors:↵Cannot instantiate cyclic dependency!
提供者解析错误:↵无法实例化循环依赖! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
InjectionToken_HTTP_INTERCEPTORS(“[ERROR - >]”):在./AppModule@-1:-1中的NgModule AppModule中
Information about the scenario (Notes) 有关场景的信息(注释)
Note 1 File: response-interceptor.service.ts 注1文件: response-interceptor.service.ts
Path: ./src/app/shared/interceptors/response-interceptor/
路径:
./src/app/shared/interceptors/response-interceptor/
I am intercepting the HTTPClient
responses to check the 401
error and when the error comes I need to ask user to re-login. 我拦截
HTTPClient
响应以检查401
错误,当错误发生时,我需要让用户重新登录。
To show the re-login prompt to user I have made a global-functions-services
that has a function 'relogin' 为了向用户显示重新登录提示,我创建了一个具有“relogin”功能的
global-functions-services
Note 2 File: global-function.service.ts 注2文件: global-function.service.ts
Path: ./src/app/shared/services/helper-services/global-function/
路径:
./src/app/shared/services/helper-services/global-function/
Here is the place where this all started to happen... As soon as I am injecting the PersonService
这是一切都开始发生的地方......一旦我注入了
PersonService
constructor(
public dialog: MatDialog,
private _personService: PersonService
) { }
I am getting this error and in PersonService I cannot find any import
that can cause the issue. 我收到此错误,在PersonService中我找不到任何导致问题的
import
。
PersonService : PersonService :
./src/app/shared/services/api-services/person/person.service.ts
import { IRequest } from './../../../interfaces/I-request';
import { environment } from 'environments/environment';
import { Injectable } from '@angular/core';
// for service
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise';
// models
import { Person } from 'app/shared/models/person';
import { RequestFactoryService, REQUEST_TYPES } from 'app/shared/factories/request-factory/request-factory.service';
@Injectable()
export class PersonService {
private _requestService: IRequest;
constructor(
_requestFactoryService: RequestFactoryService
) {
this._requestService = _requestFactoryService.getStorage(REQUEST_TYPES.HTTP);
}
public signup(record): Promise<Person> {
let url = environment.api + 'person/public/signup';
return this._requestService.post(url, record) as Promise<Person>;;
}
public authenticate(code: string, password: string): Promise<Person> {
let url = environment.api + 'auth/signin';
let postData = {
code: code,
password: password
}
return this._requestService.post(url, postData) as Promise<Person>;
}
}
Request 请求
Please suggest a solution for this, I have already wasted 2 days to figure out the issue but no luck. 请为此提出一个解决方案,我已经浪费了2天时间来解决问题,但没有运气。
Many thanks!! 非常感谢!! in advance
提前
You have to modify your response-interceptor.service.ts 你必须修改你的response-interceptor.service.ts
import { Injectable,Inject, Injector } from '@angular/core';
constructor( inj: Injector) {
this._globalFunctionService=inj.get(GlobalFunctionService)
}
You can get more info From this link 您可以从此链接获得更多信息
Cyclic dependency, means circling around endless, like planets orbiting sun.. 循环依赖,意味着在无尽的环绕中行进,就像行星绕太阳运行一样。
Solution: Break the dependency chain, Re-factor code. 解决方案:打破依赖链,重新计算代码。
You have GlobalFunctionService -> PersonService -> so on... -> ResponseInterceptorService -> and back to -> GlobalFunctionService . 你有GlobalFunctionService - > PersonService - > so so ... - > ResponseInterceptorService - >并返回 - > GlobalFunctionService 。
Cycle complete. 周期完成。
REMOVE the PersonService dependency from GlobalFunctionService. 从GlobalFunctionService中删除PersonService依赖项。 (its not used anyway, if you need it then find different way to get around.)
(无论如何,如果你需要它,它会被找到不同的方式。)
import { PersonService } from 'app/shared/services/api-services/person/person.service';
import { Injectable } from '@angular/core';
import { InputModalComponent } from 'app/shared/components/input-modal/input-modal.component';
import { MatDialog } from '@angular/material';
@Injectable()
export class GlobalFunctionService {
constructor(
public dialog: MatDialog
) { }
relogin(): void {
let dialogRef = this.dialog.open(InputModalComponent, {
width: '250px',
data: { title: "Please provide your password to re-login." }
});
dialogRef.afterClosed().subscribe(result => {
debugger
console.log('The dialog was closed');
let password = result;
});
}
}
Use setTimeout() function in constructor to assign service. 在构造函数中使用setTimeout()函数来分配服务。
constructor(private injector: Injector) {
setTimeout(() => {
this.loginService = this.injector.get(LoginService);
})
}
Try this and revert back if you face any issue. 如果您遇到任何问题,请尝试此操作并恢复原状。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.