Agm-map dando erro em localhost e no servidor

guilhermebhte · Junho 23, 2020, 9:56pm

Estou usando o AgmCoreModule, para marcar endereços no google maps.

No module, no import

imports: [
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxx'
   }),
]

no export

 exports: [
       AgmCoreModule
]

No ts

texto = 'teste';
  lat = -19.91506;
  lng = -44.00752;
  zoom = 15;

No html

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

A principio ele mostra

Mas depois dá este erro

Ou este erro

O Chave key está liberada

O que pode ser ?

guilhermebhte · Junho 24, 2020, 10:53am

Atualizei no servidor, ai não funciona mesmo.

main.49c677484d95e163b289.bundle.js:2 Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=quarterly&callback=agmLazyMapsAPILoader&key=xxxxxxxxxx&language=pt' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

load @ main.49c677484d95e163b289.bundle.js:2
Z @ main.49c677484d95e163b289.bundle.js:2
Z.ɵfac @ main.49c677484d95e163b289.bundle.js:2
si @ main.49c677484d95e163b289.bundle.js:2
ii @ main.49c677484d95e163b289.bundle.js:2
ti @ main.49c677484d95e163b289.bundle.js:2
Bc @ main.49c677484d95e163b289.bundle.js:2
pe.ɵfac @ main.49c677484d95e163b289.bundle.js:2
si @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
co @ main.49c677484d95e163b289.bundle.js:2
qc @ main.49c677484d95e163b289.bundle.js:2
template @ 14.49c677484d95e163b289.chunk.js:1
ao @ main.49c677484d95e163b289.bundle.js:2
ro @ main.49c677484d95e163b289.bundle.js:2
zo @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
ro @ main.49c677484d95e163b289.bundle.js:2
create @ main.49c677484d95e163b289.bundle.js:2
createComponent @ main.49c677484d95e163b289.bundle.js:2
activateWith @ main.49c677484d95e163b289.bundle.js:2
activateRoutes @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
activateChildRoutes @ main.49c677484d95e163b289.bundle.js:2
activateRoutes @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
activateChildRoutes @ main.49c677484d95e163b289.bundle.js:2
activate @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_tryNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_tryNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
_complete @ main.49c677484d95e163b289.bundle.js:2
complete @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_tryNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
o @ main.49c677484d95e163b289.bundle.js:2
_innerSub @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
notifyNext @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
_next @ main.49c677484d95e163b289.bundle.js:2
next @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
_trySubscribe @ main.49c677484d95e163b289.bundle.js:2
subscribe @ main.49c677484d95e163b289.bundle.js:2
call @ main.49c677484d95e163b289.bundle.js:2
Promise.then (async)
b @ main.49c677484d95e163b289.bundle.js:2
e.scheduleTask @ main.49c677484d95e163b289.bundle.js:2
onScheduleTask @ main.49c677484d95e163b289.bundle.js:2
e.scheduleTask @ main.49c677484d95e163b289.bundle.js:2
t.scheduleTask @ main.49c677484d95e163b289.bundle.js:2
t.scheduleMicroTask @ main.49c677484d95e163b289.bundle.js:2
I @ main.49c677484d95e163b289.bundle.js:2
x @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ main.49c677484d95e163b289.bundle.js:2
t @ main.49c677484d95e163b289.bundle.js:2
(anonymous) @ 14.49c677484d95e163b289.chunk.js:1
Show 170 more frames
main.49c677484d95e163b289.bundle.js:2 ERROR Error: Uncaught (in promise): Event: {"isTrusted":true}
    at x (main.49c677484d95e163b289.bundle.js:2)
    at x (main.49c677484d95e163b289.bundle.js:2)
    at main.49c677484d95e163b289.bundle.js:2
    at e.invokeTask (main.49c677484d95e163b289.bundle.js:2)
    at Object.onInvokeTask (main.49c677484d95e163b289.bundle.js:2)
    at e.invokeTask (main.49c677484d95e163b289.bundle.js:2)
    at t.runTask (main.49c677484d95e163b289.bundle.js:2)
    at y (main.49c677484d95e163b289.bundle.js:2)
    at t.invokeTask [as invoke] (main.49c677484d95e163b289.bundle.js:2)
    at u (main.49c677484d95e163b289.bundle.js:2)

guilhermebhte · Junho 26, 2020, 8:28pm

Algo ?

guilhermebhte · Junho 29, 2020, 1:30pm

Algo nesse sentido ?

guilhermebhte · Junho 29, 2020, 10:24pm

@Lucas_Camara pode me ajudar neste também

Na verdade o que entendo que é mais configuração do sistema acessar estes sites que os navegadores estão barrando.

este https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700 e o do google mapas (https://maps.googleapis.com/maps/api/js)

Lucas_Camara · Junho 29, 2020, 11:25pm

Pelo que li, de acordo com esse link. Você deve adicionar uma regra CSP para que os scripts funcionem:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'">

guilhermebhte · Junho 30, 2020, 10:14am

Já feito isso. Mas deu este erro em anexo.

Lucas_Camara · Junho 30, 2020, 11:40am

Tenta assim:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://maps.googleapis.com https://maps.gstatic.com 'unsafe-inline' 'unsafe-eval';" />

guilhermebhte · Junho 30, 2020, 11:58am

Erro.

No caso o projeto é com jhipster

guilhermebhte · Junho 30, 2020, 10:50pm

No caso o projeto é com jhipster. Spring com Angular 9

Lucas_Camara · Junho 30, 2020, 11:34pm

A questão é que vc tem que montar a tag meta para o http-equiv=“Content-Security-Policy” com as configurações para permitir execução de scripts de outra origem no atributo content. Com isso é preciso entender como esse CSP funciona (conforme links que passei). Eu não manjo muito disso, tanto que os exemplos que mandei foi com base numa rápida leitura que fiz na documentação.

guilhermebhte · Julho 1, 2020, 12:03am

Entendi isso também. Então estou no caminho certo.

guilhermebhte · Julho 1, 2020, 12:04am

Mas estranho que tudo que vejo como solução não funciona.

Lucas_Camara · Julho 1, 2020, 12:05am

Até tentei dá uma lida melhor para tentar entender e montar, mas não entendi 100% e estou meio apertado no trampo. Qdo tiver um tempinho mais suave, vou ler a doc com mais calma.

Lucas_Camara · Julho 1, 2020, 12:05am

O que mais vc tentou?

guilhermebhte · Julho 1, 2020, 12:39am

Quase tudo de pesquisa relacionada a este assunto.
Foi tanta coisa que nem lembro mais.

guilhermebhte · Julho 1, 2020, 12:39am

Pesquisada no google

guilhermebhte · Julho 1, 2020, 12:37pm

@Lucas_Camara, neste link https://stackoverflow.com/questions/33984908/google-fonts-violates-content-security-policy, eles falam em:

Authorize https://fonts.googleapis.com in style-src directive and https://fonts.gstatic.com in font-src directive: `“style-src ‘self’ https://fonts.googleapis.com; font-src ‘self’ https://fonts.gstatic.com”

Ai coloquei assim:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;" />

E perdeu tudo. Muito estranho

Tem esta página também: https://developers.google.com/web/fundamentals/security/csp?hl=pt-br

Coloquei todos que ele fala em Política aplicável a diversos recursos, mas nada.

Lucas_Camara · Julho 1, 2020, 1:42pm

Acho que tu tem que colocar um 'unsafe-line' após a url:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; 'unsafe-inline'" />

guilhermebhte · Julho 1, 2020, 1:48pm

Continua dando erro no console.

Quando acesso por: http://localhost:9000/#/

Quando acesso por: http://localhost:8080/#/

No servidor, é como dá o mesmo erro que na imagem 8080

Agm-map dando erro em localhost e no servidor

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI