Search code examples
angularangular2-routingangular2-servicesangular-router

How to read query parameters in a APP_INITIALIZER service in angular4?


I have a ConfigService written to get the configuration details before the angular app bootstraps.

The following code is written in the app.module.ts this code works fine and I am able to load the configs before the app loads.

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...

However, now I wanted to pass a payload to my config API which I have to read from the query parameters.

I tried the following but it throws

...
@Injectable()
export class ConfigService {

    private _configData: any;

    constructor(
        private _http: Http,
        private _activatedRoute: ActivatedRoute
) {
}
...

How do I read the query-parameters inside an APP_INITIALIZER service?


Solution

  • FWIW, All the methods you need are already provided on the window object.

    I recently had to check whether a query parameter of foo was passed on the URL. Here is what I ended up doing:

    export class ConfigService {
        constructor(/* your dependencies */) {
            // remember that your dependencies must be manually added
            // to your deps: [] property, ALL OF THEM (direct and indirect)
        }
    
        initialize() {
            // remember that constructors should not contain business logic
            // instead, call this during the APP_INITIALIZER part
    
            const url = new URL(window.location.href);
            const foo = url.searchParams.get('foo');
    
            // your business logic based on foo
        }
    }
    

    URL seems to be fairly well supported.