Angular-google-maps: apiKey 변수로 모듈을 초기화하는 방법

사용중인 빌드 도구의 종류 (예 : angular-cli 또는 사용자 지정 웹팩 또는 ...)와 변수의 출처에 따라 다릅니다.
이것은 약간 까다로울 수 있습니다. 특히 @NgModule 내부의 너무 많은 동적 코드를 방지하는 AOT 컴파일을 사용하고 싶을 때.

현재 구현 한 솔루션은 기본 app.module에서 'lazy config provider'를 재정의하는 것입니다.

실제로 맵을 사용하는 모듈에서는 forRoot에 빈 구성을 사용합니다.

AgmCoreModule.forRoot()

내 app.module.ts에서 :
주입 토큰 가져 오기 :

import { LAZY_MAPS_API_CONFIG }
  from 'angular2-google-maps/core/services';

@NgModule 제공 업체에 추가 :

providers: [
    {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
  ],

그리고 LazyMapsAPILoaderConfigLiteral 인터페이스 ( 'angular2-google-maps / core / services'의 '에서)를 구현해야하는'GoogleMapsConfig '클래스를 구현합니다.

@Injectable()
class GoogleMapsConfig {
  apiKey: string;
...
  constructor() {
    apiKey = getMyApiKeyFromSomewhere()
...
  }
}

그 주입 형에서 다른 서비스를 주입하고 어딘가에서 구성을 읽을 수 있습니다.
(예를 들어 angular-cli를 사용하는 경우 거기에서 환경을 가져올 수 있습니다). 또는 브라우저에서 도메인을 읽거나 서버 측 API를 호출 할 수 있습니다.

나는 위의 것을 시도했습니다. AoT 오류를 피할 수 있지만 API 키가 Google지도에 전달되지 않으므로 키 누락 오류를 반환합니다.

내 사용 사례에서는 extended-define-webpack-plugin 을 사용하여 컴파일 시간 전역 구성 설정 (빌드 유형 등에 따라 변경 될 수있는 API 키)을 추가하고 있습니다.

import { LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } from 'angular2-google-maps/core/services';

@Injectable()
export class GoogleMapsConfig implements LazyMapsAPILoaderConfigLiteral {
  apiKey: string = CONFIG.googleMapsAPIKey;
}

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [{provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}],
  bootstrap: [AppComponent]
})
export class AppModule {}

그리고지도를 사용하는 지연로드 된 모듈에서 AgmCoreModule.forRoot() 호출합니다.

저는 angular 4와 CLI 1.0.2를 사용하고 있습니다. @kyranjamie 에서 위의 코드를 얻으려고하는데 이것이 작동하도록 할 수 없습니다. 우리가 시도하는 것은 기본적으로 prod와 dev에 대해 다른 키를 설정하는 것과 같습니다.

이것은 내 코드입니다. 내가 뭘 잘못하고 있습니까?

`
@Injectable ()
내보내기 클래스 GoogleMapsConfig implements LazyMapsAPILoaderConfigLiteral {
공개 apiKey : 문자열;
constructor () {
if (environment.production) {
this.apiKey = 여기에 삽입 된 키
};
}
}
@NgModule ({
선언 : [
AppComponent
],
수입품 : [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule,
NgbModule.forRoot (),
NouisliderModule,
AgmCoreModule.forRoot ()
],
제공 업체 : [
{제공 : LAZY_MAPS_API_CONFIG, useClass : GoogleMapsConfig}
],
부트 스트랩 : [AppComponent]
})
export class AppModule {

}
`

if (environment.production) 이 (가) 진실로 해결 될 것이라고 확신합니까?

귀하의 의견에 감사드립니다.

@daBishMan 또는 @kyranjamie , 여러분이 이것을 알아 낸 적이 있다면 최종 솔루션을 게시 할 수 있습니까? @kyranjamie , 내 문제가 귀하의 문제와 유사한 것 같습니다. AOT가 관련된 제품 빌드에서 maps.google.com에 대한 요청의 agm-map 초기화, ... URL API-KEY 매개 변수가 전송되지 않습니다. . 따라서 "missing api key"오류가 발생합니다.

@ jorrit-wehelp, 귀하의 안내에 감사드립니다. 나는 나를 위해 일하는 것을 아래에 포함시키고 있습니다 ....

import {Injectable} from "@angular/core";
import {LazyMapsAPILoaderConfigLiteral} from "@agm/core";
import {Config} from "../providers/config";

@Injectable()
export class MapsConfig implements LazyMapsAPILoaderConfigLiteral{
  public apiKey: string
  public libraries: string[]
  constructor(config: Config) {
    this.apiKey = config.get("MAP_API_JS_KEY")
    this.libraries = ['places']
    console.log("lazy map init with " + this.apiKey)
  }
}

내 주 @ngmodule 에서 공급자에 이것을 가지고 있습니다 ...

    {
      provide: LAZY_MAPS_API_CONFIG,
      useClass: MapsConfig,
      deps: [Config]
    }

Config 클래스에 대한 참조는 Dev 또는 Prod 모드에서 사용되는 변수 맵의 설정을 설정하는 빌드 타임 웹팩 변수 대체입니다.

안녕하세요

@ jorrit-wehelp 주석과 같이 동적 키를 얻을 수 있었지만 사용자 로그 아웃 및 로그인 후 시나리오에서 agmKey 값이 업데이트되지 않고지도를 볼 수 없습니다.

모듈 구성 요소에서 다음 코드를 추가했습니다.
그래서 class GoogleMapsConfig 와 {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig} 를지도 @component 안에서 옮겼습니다.

```...
'@ agm / core'에서 {LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral} 가져 오기;
'@ pl-core / _services'에서 {AuthService} 가져 오기

@Injectable ();
class GoogleMapsConfig implements LazyMapsAPILoaderConfigLiteral {
공개 apiKey : 문자열;
constructor () {
console.log ( '내부 맵'); // 콘솔에 표시되지 않습니다.
this.apiKey = _authService.currentUser () && _authService.currentUser (). agmKey? _authService.currentUser (). agmKey : '';
_authService.getMapKey $ .subscribe ((key) => {
this.apiKey = 키;
})
}
}

@구성 요소({
선택기 : 'map-comp',
templateUrl : './dyn-map.component.html',
styleUrls : [ './dyn-map.component.scss'],
제공 업체 : [{provide : LAZY_MAPS_API_CONFIG, useClass : GoogleMapsConfig}],
캡슐화 : ViewEncapsulation.None
})

```
로그 아웃하고 다른 사용자로 로그인 한 후 컨트롤이 GoogleMapsConfig 클래스에 포함되지 않습니다.이 문제를 해결하려면 어떻게해야합니까 ??

@ jorrit-wehelp의 솔루션이 작동했지만 API 키를 반환하는 내 서비스가 항상 제때에 그것을 반환하지는 않는 경쟁 조건이 있었기 때문에 간헐적으로 만시도하고 렌더링 할 요소입니다. 강제하기 위해API 키가 반환 될 때까지 기다리기 위해 간단히 이렇게했습니다.

내지도 구성 요소의 생성자 :

constructor(private envService: EnvironmentService) {
    this.envService.environment$.subscribe(environment => {
      // setTimeout is to wait a beat since my GoogleMapsConfig receives
      // the key at the same instant.
      setTimeout(() => this.gmapsApiKeyReady = true);
    });
  }

그런 다음 마크 업에서 :

<agm-map *ngIf="gmapsApiKeyReady" ...></agm-map>

이것이 모든 사람에게 적용되는지 또는 사례별로 더 많이 적용되는지는 모르겠지만 이것이 agm 자체의 문제가 아니라 Angular의 AOT 컴파일 프로세스의 결과임을 발견했습니다. 다음은 내가 겪은 상황에 대한 개요입니다.

하드 코딩 된 문자열 대신 API 키 구성을 구동하여 다른 환경을 통해 이동하면 다른 API 키를 사용하고 API 사용을 모니터링 할 수 있기를 원했습니다. 이를 위해 .NET 백엔드에 필요한 값을 Example.Namespace.GoogleMapsApiKey 저장된 전역 네임 스페이스에 JavaScript로 주입했습니다. 이를 염두에두고 여기에 TypeScript 코드가 있습니다.

// typings.d.ts
declare namespace Example.Namespace {
    export const GoogleMapsApiKey: string;
}

// app.module.ts
import { AgmCoreModule } from "@agm/core";
import { NgModule } from "@angular/core";

@NgModule({
    // ...
    imports: [
        AgmCoreModule.forRoot({
            apiKey: Example.Namespace.GoogleMapsApiKey,
        })
    ],
    // ...
})
export class AppModule {}

필요한 값으로 일부 const 전역 변수에 대한 유형 정의를 만드는 것이 AOT 빌드 프로세스 중에 포함될 것이라고 생각했습니다. 그러나 AOT 컴파일러 는 TypeScript 도구의 하위 집합 만 초기화 된 변수 및 상수 만 "오류였습니다. 클래스를 사용하여 일종의 LAZY_MAPS_API_CONFIG 공급자를 사용하도록 전환하면 성공적으로 수행 할 수있었습니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.