Angular-google-maps: Lazy-maps-api-loader 오류

그는 @ravindranpandu ,

페이지 어디에서나 Google지도 스크립트를 직접로드합니까?

아니요, 그냥 typescript 파일로 가져 오면 해당 페이지를 방문 할 때마다 googlemap api에 연결되는 html에 스크립트 태그가 추가됩니다.

위의 첨부 된 이미지에서 googlemap 스크립트 태그가 7 번 추가 된 것을 볼 수 있습니다. 즉, 페이지를 7 번 방문했음을 의미합니다.

@ravindranpandu 흠, bootstrap() 함수를 보여줄 수 있습니까?

안녕하세요 @SebastianM ,

샘플 앱을 더 쉽게 만들 수 있도록 해당 ionic 앱에서 문제를 볼 수 있습니다.
https://github.com/ravindranpandu/angular-map

미리 감사드립니다

지도 페이지를 두 번 이상 방문하면 내가 말한 문제가 발생합니다.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

왜 이런 일이 발생하는지 잘 모르겠습니다. 무엇이 잘못되었는지 알려주세요.

감사

@ravindranpandu 이 줄이 이유입니다.
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

이 장소에 ANGULAR2_GOOGLE_MAPS_PROVIDERS를 포함 할 때지도 로더의 여러 인스턴스를 만듭니다.

bootstrap () 메서드에서 ANGULAR2_GOOGLE_MAPS_PROVIDERS를 사용해야합니다.

@SebastianM 이제 메인 app.ts 공급자에서 ANGULAR2_GOOGLE_MAPS_PROVIDERS를 초기화했습니다. 이제 예상대로 작동합니다. 시간 내 주셔서 감사합니다.

이것은 루트 앱 모듈 대신 기능 모듈에서 angular2-google-maps를 사용할 때도 발생하는 것 같습니다. 누구든지 확인할 수 있습니까?

app.module.ts 가져 오기에서 다음을 추가하십시오.

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

(물론 라이브러리를 제거 할 수 있습니다 : [ 'places'])

그런 다음 공유 모듈에 다음을 추가하십시오.
수입품
AgmCoreModule
및 수출 :
AgmCoreModule

다음
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. 사라짐

여러분, 이제 우리가 지연 로딩으로 어떻게 작업하는지 아는 사람 있나요?
GOOGLE_MAPS_PROVIDERS 는 더 이상 사용되지 않으며 대신 모듈이로드 될 때 API 라이브러리를로드 할 때마다로드되는 AgmCoreModule 을 사용합니다.

@szykov 지연로드 된 하위 모듈에서이 angular2 구성 요소를 사용하는 해결책은 @efstathiosntonas가 말한대로하는 것입니다.

먼저 기본 app.module.ts 에 API를 포함하십시오.

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

그런 다음 하위 모듈 내부에 API 키없이 다시 포함하십시오.

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

이제 angular2 맵 구성 요소를 지연로드하고 자바 스크립트를 한 번만 요청합니다. 나는 webpack 2를 사용하여 이것을했고 잘 작동합니다. 여기서 좋은 일을 해주셔서 감사합니다.

@IAMtheIAM 감사합니다. @efstathiosntonas에 대한 내 인사도 🥇

인덱스 파일이나 다른 곳에서 다시 호출하는 경우 제거해야합니다.
프로젝트에서 한 번만 호출하면됩니다.

안녕하세요, 여러분, 제가 두 번째로지도를 포함시킨 장소를 찾는 방법을 아는 사람 있나요?
내가 방문한 첫 페이지에지도가 있으면 볼 수 없습니다. 하지만 내가 먼저 방문한지도가있는 페이지가 아니라면 괜찮습니다.
감사

코드 샘플이 없으면 @Riasets 를 돕기가 어려울 것입니다.

Repo 링크 : https://github.com/Riasets/test
엉뚱한 코드로 죄송합니다
뿡 빵뀨

로그인 : [email protected]
비밀번호 : test1234

@Riasets 내가 당신의 앱을 복제하고 실행했는데, 아주 좋아 보인다. 나에게는 로그인 후 즉시지도가로드되고 다른 페이지로 변경하면지도도 정상적으로로드됩니다. 문제가 보이지 않습니다. 더 명확하게 설명해 주시겠습니까?

@IAMtheIAM 로그인 페이지가 처음이었고지도 페이지가 두 번째였습니다. 이 경우지도가로드됩니다. 그러나 예를 들어 이미 승인하고 / 홈 페이지로 이동하려고하면지도가로드되지 않습니다. 또는지도로 페이지를 새로 고침하면로드되지 않습니다. 또한 개발자 도구 2에서 Google지도와 동일한 스크립트를 볼 수 있습니다.