Angular-google-maps: Erro Lazy-maps-api-loader

He @ravindranpandu ,

você carrega o script do google maps sozinho em qualquer lugar da página?

Não, eu apenas o importo para o arquivo typescript, toda vez que eu visito essa página, uma tag de script é anexada ao html que vincula à API googlemap

Na imagem anexada acima, você pode ver que a tag de script do googlemap foi anexada 7 vezes, o que significa que visitei a página 7 vezes.

@ravindranpandu hmm, você pode me mostrar sua função bootstrap() ?

Olá @SebastianM ,

Para facilitar, criei um aplicativo de amostra, você pode ver o problema nesse aplicativo iônico.
https://github.com/ravindranpandu/angular-map

desde já, obrigado

Tente visitar a página do mapa mais de uma vez, você obterá o problema de que estou falando.

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

Não sei por que isso está acontecendo, por favor, deixe-me saber o que pode estar errado.

Obrigado

@ravindranpandu esta linha é o motivo:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

Você cria várias instâncias do carregador de mapas ao incluir ANGULAR2_GOOGLE_MAPS_PROVIDERS neste lugar.

Você deve usar ANGULAR2_GOOGLE_MAPS_PROVIDERS em seu método bootstrap ().

@SebastianM eu agora inicializei o ANGULAR2_GOOGLE_MAPS_PROVIDERS no provedor app.ts principal, agora funciona como esperado, obrigado pelo seu tempo.

Isso também parece acontecer quando eu uso angular2-google-maps em um módulo de recurso em vez do módulo de aplicativo raiz. Alguém pode confirmar?

Em suas importações app.module.ts, adicione:

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

(é claro que você pode remover bibliotecas: ['locais'])

e, em seguida, em um módulo compartilhado, adicione:
nas importações
AgmCoreModule
e nas exportações:
AgmCoreModule

então o
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. terá ido embora

Pessoal, alguém sabe como agora trabalhamos com carregamento lento?
GOOGLE_MAPS_PROVIDERS está obsoleto e usamos AgmCoreModule em vez disso, que carrega todas as bibliotecas API quando um módulo é carregado.

@szykov A solução para usar este componente angular2 em um submódulo com carregamento lento é fazer o que @efstathiosntonas disse

Primeiro, em seu app.module.ts , inclua a 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]
})

Em seguida, dentro de seu submódulo, inclua-o novamente, mas sem a chave 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
   ]
})

Agora, ele carregará lentamente o componente de mapas angular2 e solicitará o javascript apenas uma vez. Fiz isso usando o webpack 2 e funciona bem. Obrigado pessoal pelo bom trabalho aqui.

@IAMtheIAM obrigado. Meus cumprimentos a @efstathiosntonas também 🥇

se você estiver chamando-o novamente em algum lugar do arquivo de índice ou em outro lugar, você terá que removê-lo.
você precisa chamá-lo apenas uma vez em seu projeto.

Olá, pessoal, alguém sabe como encontrar o local onde incluí mapas pela segunda vez?
Se a primeira página que visito tiver mapa, não consigo ver. Mas se a página com mapa que eu não visitar primeiro, está tudo bem.
Obrigado

Sem um exemplo de código, será difícil ajudá-lo @Riasets

Link do repositório: https://github.com/Riasets/test
Desculpe pelo código de merda
@IAMtheIAM

login: [email protected]
senha: test1234

@Riasets eu

A página de login do