1

I have just started trying to learn Angular. I was familiar with Angular JS and decided to take the plunge into 2+. Apparently, I got started with Angular 6. That was quite a jump.

I am trying to get some information from my API when the application starts. For this, I have created a provider and I hard coded some of the information I needed to get it working. Now I am trying to remove the hard coded part and actually get a url segment from the current location. I have tried using Router and I have tried using Location. I keep getting a message that they do not have a provider. I am not sure how to work around that. My preferred solution would not be to use window.location, but something I can mock and/or unit test.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Router } from '@angular/router';

import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { TemplateListComponent } from './template-list/template-list.component';
import { SectionEditorComponent } from './section-editor/section-editor.component';
import { SiteGuidProvider } from './core/siteGuid.provider';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    TemplateListComponent,
    SectionEditorComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    HttpClientModule,
    RouterModule
  ],
  providers: [
    SiteGuidProvider, {
      provide: APP_INITIALIZER,
      useFactory: siteGuidProviderFactory,
      deps: [SiteGuidProvider],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function siteGuidProviderFactory(provider: SiteGuidProvider){
  return () => provider.load();
}

siteGuid.provider.ts

import { Injectable } from "@angular/core";
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { HttpClient } from "@angular/common/http";
import { DefaultUrlSerializer, Router, UrlTree } from "@angular/router";

import { environment } from "../../environments/environment";
import { OperationReturn } from "./models/OperationReturn";
import { Site } from "./models/Site";

@Injectable()
export class SiteGuidProvider {
    private siteGuid: string = null;

    constructor(private http: HttpClient,
                private location: Location) {}

    public getSiteGuid(): string{
        return this.siteGuid;
    }

    load(){
        console.log(this.location);
        return new Promise((resolve, reject) => {
            this.http
                .get<OperationReturn>(environment.apiUrl + '/site/name/' + 'ja2')
                .subscribe(response => {
                    this.siteGuid = (<Site>(response.successReturn)).siteGuidString;
                    resolve(true);
                })
        });
    }

    // private getDirectoryName() : string {
    //     let url : UrlTree = new DefaultUrlSerializer(this.router.url);
    // }
}
fizch
  • 2,599
  • 3
  • 30
  • 45
  • try to add a common module in an angular app for location service – Ankit Rana May 08 '18 at 05:43
  • @AnkitRana I read some where last night that if you include the Browser Module, that the Common module is also include. This is not the article I saw that in, but the Angular docs do seem to show that. https://angular.io/api/platform-browser/BrowserModule – fizch May 08 '18 at 15:40

0 Answers0