ngx-translate not working with interceptor in Ionic Capacitor app

[kumaran-IV0IV]

I'm facing an issue with ngx-translate while integrating it with an interceptor in my Ionic Capacitor application. When attempting to access the translate service within the interceptor, I facing the following error:

My project specs
Angular CLI: 16.2.5

Node: 18.19.0

Package Manager: npm 10.2.3

OS: win32 x64

Angular: 16.2.8

... animations, cdk, common, compiler, compiler-cli, core, forms

... language-service, material, platform-browser

... platform-browser-dynamic, router

Package Version

---------------------------------------------------------

@angular-devkit/architect 0.1602.5

@angular-devkit/build-angular 16.2.5

@angular-devkit/core 16.2.5

@angular-devkit/schematics 16.2.5

@angular/cli 16.2.5

@angular/google-maps 16.2.9

@schematics/angular 16.2.5

rxjs 7.8.1

typescript 5.0.4

zone.js 0.14.0

`
my app.module.ts

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslateService} from "@ngx-translate/core";


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [AppComponent],
  imports: [
   
	AppRoutingModule,
	HttpClientModule,
  
	TranslateModule.forRoot({
	  loader: {
		provide: TranslateLoader,
		useFactory: (HttpLoaderFactory),
		deps: [HttpClient]
	  }
	}),
  ],
  providers: [
	{provide: HTTP_INTERCEPTORS, useClass: InterService, multi: true},
	{
	  provide: RouteReuseStrategy,
	  useClass: IonicRouteStrategy,
	  deps: [TranslateService]
	},
	
	]
}

my interceptor

inter.service.ts



	// http-interceptor.service.ts
import {Injectable} from '@angular/core';
import {Device} from "@ionic-native/device/ngx";
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
} from '@angular/common/http';
import {Observable} from 'rxjs';
import {GlobalService} from "./global.service";
import {TranslateService} from "@ngx-translate/core";

@Injectable()
export class InterService implements HttpInterceptor {

  loginToken: any;

  constructor(private device: Device,
			  private global: GlobalService,
			  private translate: TranslateService) {

	this.global.getItem("LOGINTOKEN").then(data => {
	  this.loginToken = data;
	});

  }

  intercept(
	req: HttpRequest<any>,
	next: HttpHandler
  ): Observable<HttpEvent<any>> {
	const modifiedReq = req.clone({
		setHeaders: {
		  'Content-Type': 'application/json',
		  'DEVICE_DATE': new Date().toISOString(),
		  'DEVICE_ID': this.device.uuid,
		  'Accept-Language': this.translate.currentLang,
		  'Access-Control-Allow-Origin': '*'
		},
	  });

	console.log('Headers before request:', req.headers.keys());
	// Pass the modified request to the next handler
	return next.handle(modifiedReq);
  }
}

app.component.ts

		import {Component, OnInit} from '@angular/core';
	import {TranslateService} from '@ngx-translate/core';


	register();

	@Component({
	  selector: 'app-root',
	  templateUrl: 'app.component.html',
	  styleUrls: ['app.component.scss'],
	})
	export class AppComponent implements OnInit {
	  constructor(private translate: TranslateService,
				  ) {
		this.initTranslate();
	  }

	  async ngOnInit() {
	  }
	  
	  initTranslate() {
		this.storage.get('LANG').then(data => {
		  if (!data) {
			this.translate.setDefaultLang('en');
			this.translate.use('en');
			this.storage.set('LANG', 'en');
			this.rest.selectedLang = 'Eng';
		  } else {
			this.translate.setDefaultLang(data);
			this.translate.use(data);
			
		  }
		});
	  }
	}`

I think there might be an issue with how the TranslateService is being injected or accessed within the interceptor, but I'm not sure.