3

similar to Angular 5 APP_INITIALIZER gives Cyclic dependency error

I have an app which uses Angular 5 and SSR, I have just upgraded it all from Angular 4 where all was well.

Now when I use the APP_INITIALIZER I get the above mentioned error. I looked around and the best I could find was related to needing to inject Router, but I don't use Router! any Guidence on this would be great, thanks in advance!

here's the code:

in my providers, and function :-

  SettingsProvider,
  { provide: APP_INITIALIZER, useFactory: settingsProviderFactory, deps: [SettingsProvider], multi: true }

export function settingsProviderFactory(provider: SettingsProvider) {
  return () => provider.load();
}

The service:

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
import { ConfigSetting } from "../../models/config.model";


@Injectable()
export class SettingsProvider {

    private settings: any = null;
    private baseUrl: string;

    public subject: Subject<any> = new Subject();

    constructor(private http: HttpClient) {

    }

    load() {
        return new Promise((resolve, reject) => {
            this.http
              .get('http://localhost:54601/api/configuration')
                .subscribe(response => {
                    this.settings = response;
                    resolve(true);
                    console.log(response)
                })
        })
    }

    public getEventSetting(): boolean {
        return true /*this.settings['events'];*/
    }
    public getReviewSetting(): boolean {
        return true /*this.settings['reviews'];*/
    }
    public updateSettings(settings: ConfigSetting): void {
        this.settings = settings;
        this.subject.next();
    }

}

EDIT: Ok, I could be wrong but it looks like it may be to do with HttpClient. I remove that and it seems to work... sort of lol I can get a message to the console. I need http though! I tried adding a timeout and injecting it, but that didn't work.

Mark Perry
  • 2,908
  • 3
  • 18
  • 27
  • 1
    hmm.. can you put a plunkr? Grossly, I do not see a cyclic dependency injected unless your `deps: [SettingsProvider]` is conflicting with `settingsProviderFactory(provider: SettingsProvider) {...}`. Have you tried removing that and then serve? – Gary Feb 12 '18 at 04:24
  • Which exact version of angular are you using? And did you declare any http interceptors? – David Feb 12 '18 at 08:04
  • @David I'm using angular 5.0.0 I haven't used any interceptors. The service simply uses an http.get for getting some settings from the API. – Mark Perry Feb 12 '18 at 12:27
  • If I remove the deps the apps start, but obviously that removes the point of having it.. – Mark Perry Feb 12 '18 at 12:29
  • Here is a plunkr, but I never seem to get them working! https://plnkr.co/edit/G5aW6pUEX8Q2FhKmHUKy?p=preview – Mark Perry Feb 12 '18 at 12:49
  • yeah plunkr does not work, I usually use stackblitz. Can you try upgrading angular to v 5.2.3 or latest (on your local project I mean)? – David Feb 12 '18 at 12:56
  • I'll give it a shot! I'll back it up, update and let you know if it helps. – Mark Perry Feb 12 '18 at 13:41
  • I'm just suggesting this as I know some cyclic dependencies issues were fixed in 5.2.3. It's worth a shot – David Feb 12 '18 at 13:56
  • Upgraded to 5.2.4 but still get the error. I think its the HttpClient – Mark Perry Feb 12 '18 at 14:54

2 Answers2

0

Right, so the issue was HttpClient.

I swapped it out for the old {Http} from "@angular/http"; imported the module in @NgModule and it works.

Mark Perry
  • 2,908
  • 3
  • 18
  • 27
  • Probably not a long term solution as it's already deprecated though :( I modified your plunkr and there is no cyclic dependency issues (I just commented some rx code as I could not get it to load in plunkr) https://plnkr.co/edit/CpBDwAN4Lqv6RZB3Ql6l?p=preview – David Feb 12 '18 at 15:19
0

The problem was resolved by using the app.browser.module rather than the shared app.module

Mark Perry
  • 2,908
  • 3
  • 18
  • 27