Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]")

I’m submitting a…

[ ] bug report
[ ] feature request
[x] support request

Actual behavior

Installed the module like described here in the docs but although it’s compiled without problems, opening the client throws the following error

zone.js:192 Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
    at NgModuleProviderAnalyzer.parse (compiler.js:19549)
    at NgModuleCompiler.compile (compiler.js:20138)
    at JitCompiler._compileModule (compiler.js:34436)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34365)
    at JitCompiler.compileModuleAsync (compiler.js:34259)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5551)
    at HTMLDocument.eval (main.ts:12)

Specifications:

"@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@nguniversal/common": "^5.0.0-beta.5",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-l10n": "^4.1.5",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"

Here is the content of my entire app.module.ts file:

import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {TransferHttpCacheModule} from '@nguniversal/common';
import {AppRoutingModule} from './app.routing';
import {FrontModule} from './views/front/front.module';
import {SharedModule} from './shared/shared.module';
import {APP_INITIALIZER, Inject, Injectable, NgModule, PLATFORM_ID} from '@angular/core';
import {
    L10nConfig, L10nLoader, LocaleValidationModule, LocalizationModule, ProviderType, StorageStrategy, TRANSLATION_CONFIG,
    TranslationConfig,
    TranslationModule
} from 'angular-l10n';
import {isPlatformBrowser, isPlatformServer} from '@angular/common';


const l10nConfig: L10nConfig = {
    locale: {
        languages: [
            {code: 'en', dir: 'ltr'},
            {code: 'ro', dir: 'ltr'},
            {code: 'de', dir: 'ltr'},
        ],
        defaultLocale: {languageCode: 'ro', countryCode: 'RO'},
        currency: 'RON',
        storage: StorageStrategy.Cookie,
        cookieExpiration: 30
    },
    translation: {
        providers: [],
        caching: true,
        composedKeySeparator: '.',
        missingValue: '',
        i18nPlural: true
    }
};

@Injectable() export class LocalizationConfig {

    constructor(
        public l10nLoader: L10nLoader,
        @Inject(TRANSLATION_CONFIG) private translationConfig: TranslationConfig,
        @Inject(PLATFORM_ID) private platformId: Object
    ) { }

    load(): Promise<void> {
        if (isPlatformBrowser(this.platformId)) {
            // Client only code.
            this.translationConfig.providers = [
                { type: ProviderType.Static, prefix: './assets/l10n/locale-' }
            ];
        }
        if (isPlatformServer(this.platformId)) {
            // Server only code.
            this.translationConfig.providers = [
                { type: ProviderType.Static, prefix: 'http://localhost:4000/assets/l10n/locale-' }
            ];
        }

        return this.l10nLoader.load();
    }

}

export function initLocalization(localizationConfig: LocalizationConfig): Function {
    return () => localizationConfig.load();
}

@NgModule({
    imports: [
        BrowserModule.withServerTransition({appId: 'my-app'}),
        TransferHttpCacheModule,
        AppRoutingModule,
        SharedModule,
        LocalizationModule.forRoot(l10nConfig),
        TranslationModule.forRoot(l10nConfig),
        LocaleValidationModule.forRoot(),
        FrontModule,
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        LocalizationConfig,
        {
            provide: APP_INITIALIZER,
            useFactory: initLocalization,
            deps: [LocalizationConfig],
            multi: true
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

[robisim74]

@sri-prasanna Your problem does not seem to be related to using this library. However the solution is always the same (https://stackoverflow.com/questions/39767019/app-initializer-raises-cannot-instantiate-cyclic-dependency-applicationref-w). If you need the instance of router during APP_INITIALIZER you have to use injector:

constructor(private injector: Injector) { }

myMethod() {
    const router = this.injector.get(Router);
}

@tudor2004 Did you solve your problem? I tried TransferHttpCacheModule in an Angular v7 app and I did not get any error.

[JohnGalt1717]

The problem with this is that the root error from Angular doesn’t tell you what has the cycles so it’s virtually impossible to debug it and fix it without a shotgun approach.