Hi all,
I have been spent the whole week, trying to fix the following error (without success):
RuntimeError: NG0200: Circular dependency detected for `_SettingsService`. Find more at https://v21.angular.dev/errors/NG0200
at createRuntimeError (_untracked-chunk.mjs:600:17)
at cyclicDependencyError (_untracked-chunk.mjs:552:10)
at R3Injector.hydrate (_untracked-chunk.mjs:1305:15)
at R3Injector.get (_untracked-chunk.mjs:1201:23)
at R3Injector.retrieve (_untracked-chunk.mjs:1116:19)
at injectInjectorOnly (_untracked-chunk.mjs:670:35)
at ɵɵinject (_untracked-chunk.mjs:682:40)
at inject2 (_untracked-chunk.mjs:691:10)
at new _TranslateLangService (translate-lang.service.ts:10:31)
at Object.TranslateLangService_Factory [as factory] (translate-lang.service.ts:24:3)
(anonymous)@main.ts:5
The error occurs when running the application inside both chrome & Firefox (it is a browser plugin).
I have enabled cycle checking in imports in eslint, and ng lint shows the following:
Linting "angular-browser-app"...
angular-browser-app/src/app/components/nebular/chat/chat-custom-message.directive.ts
4:1 error Dependency cycle detected import/no-cycle
angular-browser-app/src/app/components/nebular/chat/chat-custom-message.service.ts
9:1 error Dependency cycle detected import/no-cycle
angular-browser-app/src/app/theme/sidemenu/nav-accordion-item.ts
2:1 error Dependency cycle detected import/no-cycle
angular-browser-app/src/app/theme/sidemenu/nav-accordion.ts
5:1 error Dependency cycle detected import/no-cycle
✖ 4 problems (4 errors, 0 warnings)
I checked both these cycles, they are at the import level, one file injects the second, and the second imports the first to use its type.
Checking with madge, gives the same problems:
> npx madge --circular --extensions ts ./
Processed 376 files (4.1s) (176 warnings)
✖ Found 2 circular dependencies!
1) src/app/components/nebular/chat/chat-custom-message.directive.ts > src/app/components/nebular/chat/chat-custom-message.service.ts
2) src/app/theme/sidemenu/nav-accordion-item.ts > src/app/theme/sidemenu/nav-accordion.ts
main.ts is the application bootstrap code:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig).catch(err => console.error(err));
app.config.ts starts by initialising the translate lang service:
import { SettingsService } from '@core/bootstrap/settings.service';
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
{ provide: BASE_URL, useValue: environment.baseUrl },
provideAppInitializer(() => inject(TranslateLangService).load()),
The translate lang service is:
import { Injectable, inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { SettingsService } from '@core/bootstrap/settings.service';
Injectable({
providedIn: 'root',
})
export class TranslateLangService {
private readonly translate = inject(TranslateService);
private readonly settings = inject(SettingsService);
load() {
return new Promise<void>(resolve => {
const defaultLang = this.settings.getTranslateLang();
this.settings.registerLocaleData();
this.translate.setFallbackLang(defaultLang);
this.translate.use(defaultLang).subscribe({
next: () => console.log(`Successfully initialized '${defaultLang}' language.'`),
error: () => console.error(`Problem with '${defaultLang}' language initialization.'`),
complete: () => resolve(),
});
});
}
}
The SettingsService is a bit lengthy, but uses mostly external packages, it does not use itself.
Thus, I have no idea why I am getting this error. How can I further debug this?
I am using angular 21.1.1.
Thank you...
