Unable to create circular dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in. / AppModule @ -1 : -1

Question

I added this code to my app.module.ts

    providers: [ AppConfigService,
            {
                provide: APP_INITIALIZER,
                useFactory: (config: AppConfigService) => () => config.getAppConfig(),
                deps: [AppConfigService],
                multi: true
            },
]

Getting this error

Problem : I used ngx-permission pkg to get permission. I set the route method . but when I refresh a page that redirects time to the home page, stay on the current page instead. so I tried loading permissions before starting the launch method to fix this problem, but got this error.

 config.getAppConfig() // call when application start up

have any ideas please help. another solution is also welcome.

Answer 1

app.module.ts

export function loadConfig(appService: AppConfigService): Function {
    return () => appService.getAppConfig();
}

 AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [AppConfigService],
            multi: true
        },

issue into `HttpInterceptor` so i used injector for that
constructor(private inj: Injector) {
        super(
            inj.get(XHRBackend),
            inj.get(RequestOptions)
        );
}

Answer 2

, APP_INITIALIZER Angular, , Router.

, Injector, .

AppConfigService:

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {

  // Helper property to resolve the service dependency.
  private get _router() { return this._injector.get(Router); }

  constructor(
    //private _router: Router
    private _injector: Injector
  ) { }

  navigate() {
    this._router.navigate(['/']);
  }
}