ngx-translate not working after i add HttpInterceptor

Question

like the title says , everything was working fine until i add HttpInterceptor to my code , the problem is i have 2 ways to translate my fields one is still working fine and the second is not like shown bellow

 <dx-button 
    (click)="logIn()" 
    type="default" id="buttonLogIn"
    text="{{ 'LoginPage.Login'|translate }}">
</dx-button>
<span id="containerStayConnected"><input type="checkbox" id="stayConnected" [(ngModel)]="stayConnected" /><label for="stayConnected" translate>LoginPage.StayConnected</label></span>
<a id="forgetPassword" translate (click)="isPopupForgotPasswordVisible = !isPopupForgotPasswordVisible">LoginPage.ForgotPassword</a><br><br><br>

the translate inside the balise is working while the translate that using pipe in dxButton is not working this is my interceptor service

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {

constructor(public auth: AuthService) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const userId = localStorage.getItem('access_token');
    request = request.clone({
        setHeaders: {
            Authorization: `Bearer ${userId}`
        }
    });
    return next.handle(request);
}

} does anyone have any idea about why after i add the httpInterceptor the translate that using Pipe stop working .

Answer 1

i solved the issue for this by removing public auth: AuthService from the constructor. I think what creates the issue here is HttpInterceptor and AuthService both injects HttpClient. If anyone interessted to check more informations about similars issues just check here https://github.com/angular/angular/issues/18224