Angular-google-maps: Angular 4 Universal - SyntaxError: exportação de token inesperada

Olá, tive que lidar com esse problema que não é realmente um problema da Agm, mas global.
A maioria dos pacotes recentes, incluindo Agm, são compilados em es6, com import e export palavras-chave.

Isso não era um problema antes da Universal, pois sempre há um arquivo de pacote nos pacotes para, digamos, System.js para dev local e Webpack / Rollup entenderá es6 para pacotes de produção.

Mas com o Universal, você usa diretamente os arquivos em node_modules, em es6 então, e o node ainda não sabe sobre import e export tokens.

Duas coisas podem ser feitas, você pode empacotar seu aplicativo até mesmo para universal, mas você perderá muito tempo de compilação para um pacote que é inútil em um contexto de servidor.

Outra opção, a que usei em minha empresa, é copiar todas as suas fontes em uma pasta tmp antes de compilar e criar uma pasta node_modules nesta pasta tmp.
Você pode então copiar toda a pasta @agm (a que está na pasta node_module "real" no "fake" no tmp. Você poderá usar o babel para transformar os arquivos es6 copiados na pasta node_modules falsa em commonjs que nodejs entenderá. (quando você precisar de @agm, node procurará o arquivo na pasta falsa node_modules)

Isso é super irritante e não há realmente outras opções por agora (deixe-me saber se você encontrar uma melhor). Eu realmente acho que os módulos ng2 precisam encontrar uma maneira de fornecer arquivos es6 e commonjs se quiserem que seus módulos sejam fáceis de usar com o universal :)

Use webpack.config

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],

@kkaabbaa você pode confirmar se isso funciona?
Simplesmente adicioná-lo ao meu webpack não funcionou.

eu tenho o mesmo problema, eu tenho babel e fiz uma cópia do projeto em uma nova pasta, em seguida, instalei o babel localmente, mas gostaria de entender o processo que Adrienboulle ele fez para a empresa dele porque eu tenho que finalizar isso coisa, obrigado antecipadamente.

Eu adicionei ao webpack.config e não funciona para mim.

externos: [nodeExternals ({
lista de permissões: [
/ ^ @ agm / core /,
]
})],

Eu o tenho funcionando com uma solução alternativa ao carregar dinamicamente um componente que contém meu mapa agm com base no navegador ou servidor: https://angular.io/guide/dynamic-component-loader

Compilei para es5, mas também estou apresentando erro

Finalmente capaz de usar o google map com universal. Estou fazendo repo e vídeo

Usei esta postagem https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angular-cli-db8b53bba07d

e acrescentou

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],

@kkaabbaa onde você adicionou, por favor?

Meu webpack.config.js
https://gist.github.com/kkaabbaa/a308b218938ae55357f73c162e887bd5

Ainda sem funcionar, tentei a solução @kkaabbaa , mas não funcionou para mim, o mesmo problema

_Atualizou a solução para a versão mais recente do babel_

@philippeboyd @dkmostafa i resolvido o mesmo problema recentemente para este módulo e outros como -> NGX traduzir e mais ...

solução (compilar os arquivos js em es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. adicione isso ao projeto raiz com o nome .babelrc ou adicione as predefinições diretamente via cli
   { "presets": ["@babel/preset-env"] }

3. adicione um script npm em package.json no escopo "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. adicione um script postinstall em package.json no escopo "scrtipsts"
   "postinstall": "npm run compile_@agm_core",

5. execute npm i para instalar os dep. Depois de instalar o deps, o script postinstall será executado e o babel irá compilar os arquivos js desejados

6. execute seu servidor e deve mundo

7. Dê-me um feedback se funcionar. Fiz o mesmo dilui para mais de 3 módulos npm que funciona na minha máquina: D

@AnthonyNahas é uma ideia muito interessante. Parece bom demais para ser verdade! Vou tentar

Alguém tem uma solução para isto? Recentemente também encontrei isso.

@adrienboulle obrigado por explicar as coisas, agora me pergunto: não seria melhor lançar o pacote em um formato diferente que também é adequado para Angular Universal? Dessa forma, todas as soluções alternativas que circulam aqui não seriam mais necessárias. Ou seria possível fazer o Angular Universal entender o código ES6?

@AnthonyNahas eu tentei isso. Agora mostra outro erro

import * as i0 from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import

@AnthonyNahas , muito obrigado pela sua solução! Tentei várias outras soluções que não funcionaram para mim por cerca de um mês! Isso realmente resolve meu problema =)

@karthikeyanmanureva u deve fazer a mesma coisa para outro módulo npm que está lançando "SyntaxError: importação de token inesperada" ...
@martinreus cheers

@AnthonyNahas funcionou para mim, não sei como surgiu essa solução, mas obrigado,

@AnthonyNahas , sua solução me ajudou a resolver esse problema

@AnthonyNahas , obrigado, por um módulo funcionou. Mas agora estou usando outro pacote ng2-slim-loading-bar e ele gera um erro:

some_path/client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle.ts:9

export const styles:any[] = ['.slim-loading-bar[_ngcontent-%COMP%] {\n    position: fixed;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 99999;\n}\n\n\n.slim-loading-bar-progress[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 0;\n    z-index: 99998;\n    background-color: green;\n    color: green;\n    box-shadow: 0 0 10px 0; \n    height: 2px;\n    opacity: 0;\n\n    \n    -webkit-transition: all 0.5s ease-in-out;\n    -moz-transition: all 0.5s ease-in-out;\n    -o-transition: all 0.5s ease-in-out;\n    transition: all 0.5s ease-in-out;\n}'];
^^^^^^

SyntaxError: Unexpected token export

Alguma ideia de como posso consertar?

adicione-o à seção de exclusão e ao webpack, pelo menos tente para ver se
trabalho

2017-11-20 15:18 GMT + 01: 00 lomboboo [email protected] :

@AnthonyNahas https://github.com/anthonynahas , obrigado, por um módulo
funcionou. Mas agora estou usando outro pacote ng2-slim-loading-bar
https://github.com/akserg/ng2-slim-loading-bar e gera um erro:

some_path / client / dist / ngfactory / node_modules / ng2-slim-loading-bar / style.css.shim.ngstyle.ts: 9

exportar estilos const
^^^^^^

SyntaxError: exportação de token inesperada

Alguma ideia de como posso consertar?

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo adiciona um novo script npm para transpilar o módulo ng2-slim ...
-> adicionar um script npm em package.json no escopo "scrtipsts"
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

então ->

add a postinstall script in package.json in "scrtipsts" scope "postinstall": "npm run compile_<strong i="11">@agm_core</strong> && npm run compile_ng2-slim-loading-bar ",

-> depois disso, execute npm i mais uma vez

-> resultado
o outro módulo deve ser transpilado também

@AnthonyNahas muito obrigado

@AnthonyNahas , como mencionei já tenho script que transpila esse módulo para 2015. Tenho um jeito um pouco diferente, mas a ideia é a mesma. Então eu tenho:

    "ng2_slim:tocommonjs": "node node_modules/babel-cli/bin/babel.js node_modules/ng2-slim-loading-bar/src -d --out-dir node_modules/ng2-slim-loading-bar/src --presets es2015",
    "prestart": "npm run ng2_slim:tocommonjs && npm run ngxerrors:tocommonjs && ng build --prod && ngc",
    "start": "ts-node src/server.ts"

Ou importa fazer exatamente do seu jeito, durante o gancho postinstall ?

@AnthonyNahas , Eu tentei compilar para 2015 durante o gancho postinstall , mas o erro apareceu mesmo assim. Acho que client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle arquivo gerado pelo Angular, mas não tenho ideia de como fazer funcionar.

@lomboboo

em postinstall não é importante!

Esse bloco é o mesmo que você usou no seu projeto?

Eu encontrei um bug no primeiro script npm: você pode precisar transpilar outros arquivos além desses arquivos no src ->

antes ->
"ng2_slim:tocommonjs": "node node_modules/babel-cli/bin/babel.js node_modules/ng2-slim-loading-bar/src -d --out-dir node_modules/ng2-slim-loading-bar/src --presets es2015",

deve ser (depois) ->

"ng2_slim:tocommonjs": "babel node_modules/ng2-slim-loading-bar -d --out-dir node_modules/ng2-slim-loading-bar --presets es2015",

PS: se você executar um script npm a partir do terminal, você pode usar babel vez de node_modules/babel-cli/bin/babel.js . O outro só é útil quando você executa suas tarefas imediatamente do terminal e não via npm ...

Acabei de bifurcar este repositório e irei fornecer em breve uma solução melhor para resolver esse tipo de erro, como exportação / importação de token inesperado ... para que o desenvolvedor possa usar este módulo sem transpilar manualmente os arquivos src e executar um script npm personalizado ..

@AnthonyNahas MVP

@AnthonyNahas , então acabei com essa solução. Eu criei webpack.config.js , que é para servidor e configurei assim:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
  entry: {
    server: './src/server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      'main.server': path.join(__dirname, 'dist', 'server', 'main.bundle.js')
    }
  },
  target: 'node',
  plugins: [
    //new webpack.NormalModuleReplacementPlugin(/\.\.\/environments\/environment/, '../environments/environment.prod')
  ],
  externals: [nodeExternals({
    whitelist: [
      /^ng2-slim-loading-bar/,
    ]
  })],
  node: {
    __dirname: false,
    __filename: false
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

Portanto, você precisa instalar o webpack e o webpack-node-externals localmente. Dentro do nodeExternals você pode definir plugins, pacotes que você não precisa quando o servidor compila. No meu caso, é o plugin ng2-slim-loading-bar que gera o erro que descrevi.
E, finalmente, basta adicionar webpack a package.json ao executar o script de servidor. Meu package.json tem esta aparência:

...
"prestart": "ng build --prod && ngc && webpack",
 "start": "node dist/server.js",
...

Se você não tem o nome padrão webpack.config.js você precisa especificar o nome correto como webpack argumento. Por exemplo,

...
"prestart": "ng build --prod && ngc && webpack --config webpack.server.config.js", // <<<-------
 "start": "node dist/server.js",
...

Espero que ajude alguém. Na minha opinião, é uma solução mais robusta que compilar todos os plugins com os quais seu servidor tem problemas.

@AnthonyNahas, estou enfrentando o mesmo problema e tentei sua solução, mas
O que fazer para o ponto abaixo que você forneceu na solução

• adicione isso ao projeto raiz com o nome .babelrc
  {"predefinições": ["es2015"]}

@Harshketu
em seu projeto, no nível superior (raiz) -> crie um arquivo com o nome .babelrc e cole
o seguinte -> { "presets": ["es2015"] } <- nesse arquivo

@AnthonyNahas
sua solução está funcionando com o arquivo webpack.config ou sem?

depende se o seu projeto é ejetado .
No entanto, transpilar o código em es5 não tem uma dependência direta com o arquivo webpack.config

Seguindo @AnthonyNahas sua solução, eu empurrei uma versão compilada para git para que seja possível usá-lo diretamente no package.json sem ter que instalar o babel etc:

"@agm/core": "git+https://github.com/cmddavid/core.git"

Pode ser útil para qualquer pessoa. Estou usando o Firebase Hosting e, por algum motivo, o Firebase não parece estar compilando o código, embora esteja usando exatamente o mesmo método descrito por Anthony no package.json para Firebase. É por isso que uso esta solução alternativa.

@cmddavid Também encontrei esse problema no firebase. Ele não funcionará no firebase porque instala módulos de nó novamente e não tem o babel-cli instalado globalmente.

@dockleryxk então isso significa que minha solução é a única solução viável ao usar o Firebase?

Não entendo muito bem por que o Firebase está instalando todos os módulos novamente. O pacote do servidor que está sendo gerado no cliente antes da implantação não é suficiente? Pelo que posso dizer, o script de nó sendo executado pela função Firebase requer apenas um conjunto muito limitado de pacotes de nó. Certamente não o pacote @agm/core . Uma vez que o pacote do servidor já está sendo enviado ao servidor durante a implantação.

@cmddavid Pode levar muito tempo para fazer o upload de um diretório de módulos de nó. Meu palpite é o porquê, mas eu realmente não sei. Pessoalmente, coloco os módulos compilados em um diretório dentro do diretório de funções e apenas faço referência a ele no package.json no diretório de funções. Por exemplo "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas salvou meu dia. Estava lutando para colocar essa renderização Angular Universal Server Side em funcionamento há semanas. Sua solução funcionou perfeitamente !!

@AnthonyNahas , muito obrigado, está funcionando bem para mim, quando eu abri os arquivos @agm , depois de ver a sintaxe ES6, primeiro pensei em compilar usando webpack que é difícil (pelo menos para mim), de qualquer forma, obrigado novamente, configure Angular Universl SSR e absolutamente bem agora!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], fez o trabalho para mim. Obrigada. Caso contrário, a solução @AnthonyNahas deve fazer o trabalho.

Tive o mesmo problema com um dos meus próprios pacotes e, no fim das contas, tornar o pacote "Formato de pacote angular" compatível resolveu o problema. Este é um pacote npm muito útil para ajudar com isso: https://github.com/dherges/ng-packagr

É bastante plug and play.

@AnthonyNahas. Isso também está funcionando para mim.
Obrigado

Vocês ainda têm problemas com isso? Estou usando este módulo em um projeto Universal e é um arquivo de trabalho pronto para uso. Quais versões você está usando?

Olá @AnthonyNahas , não consigo fazer isso funcionar para ng2-google-place-autocomplete

Recebo esta mensagem de erro:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
exportar * de './src/index';
^^^^^^

SyntaxError: exportação de token inesperada
em createScript (vm.js: 80: 10)
em Object.runInThisContext (vm.js: 139: 10)
em Module._compile (module.js: 599: 28)
em Module._extensions..js (module.js: 646: 10)
em Object.require.extensions. (função anônima) [as .ts] (C: \ Users \ Andrenode_modulests-node \ srcindex.ts: 392: 14)
em Module.load (module.js: 554: 32)
em tryModuleLoad (module.js: 497: 12)
em Function.Module._load (module.js: 489: 3)
em Module.require (module.js: 579: 17)
em require (internal / module.js: 11: 18) `

Eu então segui seus passos:

1. npm i --save -dev babel-cli babel-preset-es2015

2. adicione isso ao projeto raiz com o nome .babelrc
   {"predefinições": ["es2015"]}

3. adicione este script ao meu arquivo package.json

"scripts": {
"compile_ng2-google-place-autocomplete": "babel node_modules / ng2-google-place-autocomplete -d node_modules / ng2-google-place-autocomplete --presets es2015",
"prestart": "ng build --prod && ngc",
"start": "ts-node src / server.ts",
"postinstall": "npm run compile_ng2-google-place-autocomplete"
}

1. execute o npm i para instalar o deps. Depois de instalar o deps, o script postinstall será executado e o babel irá compilar os arquivos js desejados

2. Execute npm run start

3. Ainda recebo o mesmo erro.

Se você pudesse me ajudar, seria uma grande ajuda, pois passei horas tentando consertar isso!

@dockleryxk , @AnthonyNahas , @cmddavid é uma maneira mais simples e fácil ...
yarn add agm-compilado. Sem webpack e sytemjs nonsens, trabalhe angular5 ^ + universal + ssr + firebase hosting / functions.

@retrwood isso é ótimo, seria bom ter uma versão NPM disponível também.

Obrigado @AnthonyNahas ,
Você salvou meu dia, é realmente uma ótima solução, já que eu não concordo em ejetar a ferramenta CLI.

Muito obrigado.

@AnthonyNahas babel-preset-es2015 está obsoleto agora. Como podemos lidar com esse problema?

@Gomathipriya obrigado por perguntar! Você me deu a motivação para finalmente enviar uma solicitação de pull!

21.9.2017 , publiquei uma solução para lidar com esse bug! Naquela época, eu não sabia que a biblioteca estava gerando o código de escrita como bundle, es5 ... Eu tinha muitos projetos e não consegui descobrir o que está realmente errado com @ agm / core ! Bem, ontem eu estava desenvolvendo extensões de material angular para aplicativos angulares que usam @ agm / core e enfrentei o mesmo problema ao testar jest . Então decidi dar uma olhada mais neste projeto e encontrei algo interessante.

Na verdade, não precisamos mais transpilar o código para es5, uma vez que a construção deste projeto já fez isso para nós. Mas o texto datilografado não sabe sobre eles! Algumas informações estão faltando no package.json .

Então, dica para resolver isso:

1. vá para cd node_modules
2. cd \@agm/core
3. abra o package.json
4. e adicione o seguinte

 "main": "core.umd.js",
  "es2015": "index.js",
  "typings": "index.d.ts",

e o bug deve ser resolvido! Agora, ao compilar, o typescript escolherá o código js certo!

Enviei há alguns segundos uma solicitação de pull!

Por favor, apoie este PR depois de testá-lo em sua máquina!

Eu testo o seguinte cenário aqui neste projeto @ angular-material-extensions / google-maps-autocomplete

se você gosta do projeto, por favor, apoie-me estrelando e compartilhe!

Obrigado a todos 👍 ❤️

Alguma novidade ? @SebastianM

@bastienlemaitre Vou ajustar meu PR

dê uma olhada aqui:

https://www.dropbox.com/s/88pez0ytawx59ar/fix-agm-ssr-1.mp4?dl=0
https://www.dropbox.com/s/yu1vq328o96brvd/fix-agm-ssr-2.mp4?dl=0
https://www.dropbox.com/s/5i9r64lotq1cfuo/fix-agm-ssr-3.mp4?dl=0

diga se o truque funcionou para você!

@AnthonyNahas estamos vendo esse mesmo problema com o pacote clusterer de mapas também. Super frustrante, agradeço por dedicar um tempo para trabalhar nisso. Existe uma solução proposta que eu poderia implementar enquanto o RP está em revisão?

Posso adicionar isso manualmente para fazer nossos testes passarem, mas ainda assim falhará no pipeline.

@Gomathipriya Acabei de atualizar a solução postada acima para a versão mais recente do babel v7.1.0 e testei o processo em meu próprio npm mobule @ angular-material-extensions / google-maps-autocomplete

verifique o status do circleci aqui

status de travis-ci aqui

@mcblum você provavelmente deve fazer a mesma coisa que o módulo principal (veja a solução postada acima)

saúde 🍻

Agm é realmente incrível e útil, mas infelizmente não pude ajudar em relação ao PR, provavelmente muito complicado para mim.

Portanto, decidi implementar um código personalizado para a API Javascript do Google Maps que se transformou em um novo componente da Web chamado web-google-maps que publiquei hoje e usei como substituto em meu projeto para resolver o problema.

Novamente, Agm é incrível e este Web Component não oferece tantas possibilidades quanto esta biblioteca. Pensei apenas em escrever estas linhas e mencioná-las caso alguém que está enfrentando o problema tenha pressa em encontrar uma solução potencial, nada mais, nada mais.

Não tenho nenhum problema durante a construção, mas ao solicitar uma página que deveria ser renderizada no lado do servidor, recebo o seguinte erro:

ERROR { ReferenceError: window is not defined
    at WindowRef.getNativeWindow (webpack:///./node_modules/@agm/core/utils/browser-globals.js?:8:57)
    at LazyMapsAPILoader.load (webpack:///./node_modules/@agm/core/services/maps-api-loader/lazy-maps-api-loader.js?:45:38)
    at new FitBoundsService (webpack:///./node_modules/@agm/core/services/fit-bounds.js?:38:81)
    at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:19057:20)
    at _createProviderInstance$1 (webpack:///./node_modules/@angular/core/fesm5/core.js?:19042:20)
    at createProviderInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:18919:12)
    at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:20149:36)
    at Object.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20070:5)
    at TemplateRef_.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:18651:38)
    at ViewContainerRef_.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:18517:35)
    at NgIf._updateView (webpack:///./node_modules/@angular/common/fesm5/common.js?:3489:45)
    at NgIf.set [as ngIf] (webpack:///./node_modules/@angular/common/fesm5/common.js?:3457:18)
    at updateProp (webpack:///./node_modules/@angular/core/fesm5/core.js?:19212:37)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:18963:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:20270:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:20232:16)
    at prodCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:20773:5)
    at Object.eval [as updateDirectives] (webpack:///./dist/server/main.js?:45103:316)
    at Object.updateDirectives (webpack:///./node_modules/@angular/core/fesm5/core.js?:20561:72)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20214:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20418:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20215:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20418:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20215:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at Object.checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at ViewRef_.detectChanges (webpack:///./node_modules/@angular/core/fesm5/core.js?:18595:22)
    at eval (webpack:///./node_modules/@angular/core/fesm5/core.js?:15257:63)
    at Array.forEach (<anonymous>)
    at ApplicationRef.tick (webpack:///./node_modules/@angular/core/fesm5/core.js?:15257:25)
    at eval (webpack:///./node_modules/@angular/core/fesm5/core.js?:15148:105)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:387:26)
    at Object.onInvoke (webpack:///./node_modules/@angular/core/fesm5/core.js?:14529:33)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:386:32)
    at Zone.run (webpack:///./node_modules/zone.js/dist/zone-node.js?:137:43)
    at NgZone.run (webpack:///./node_modules/@angular/core/fesm5/core.js?:14443:28)
    at Object.next (webpack:///./node_modules/@angular/core/fesm5/core.js?:15148:81)
    at SafeSubscriber.schedulerFn [as _next] (webpack:///./node_modules/@angular/core/fesm5/core.js?:10544:52)

@ maxime1992 talvez tente uma solução rápida: exiba seu mapa apenas no lado do navegador, não há nenhum elemento window no lado do servidor (é por isso que poderia ser construído, mas falha no tempo de execução)

pseudo-código:

<ng-container *ngIf="isPlatformBrowser(platformId)">
  <here-your-agm-map/>
</ng-container>

@AnthonyNahas eu tentei sua solução, mas ainda obtive o mesmo erro.
Estou tentando implantar meu pacote de servidor na função de fogo na nuvem ...

sem agm está tudo ok / funcionando, mas com agm obteve erro -

funções [ssr (us-central1)]: Erro de implantação.
Erro ao carregar a função: o código no arquivo index.js não pode ser carregado.
Existe um erro de sintaxe em seu código?
Rastreamento de pilha detalhado: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(função (exporta, requer, módulo, __filename, __dirname)
{import {Injetável, NgZone} de '@ angular / core';
^^^^^^

SyntaxError: Importação de token inesperada
em createScript (vm.js: 56: 10)
em Object.runInThisContext (vm.js: 97: 10)
em Module._compile (module.js: 549: 28)
em Object.Module._extensions..js (module.js: 586: 10)
em Module.load (module.js: 494: 32)
em tryModuleLoad (module.js: 453: 12)
em Function.Module._load (module.js: 445: 3)
em Module.require (module.js: 504: 17)
em require (internal / module.js: 20: 19)
no objeto. @ agm / core / services / manage / circle-manager (/user_code/dist/server/main.js:4999:18)

por favor, responda

Isso significa que o compilador babel não fez seu trabalho, pois teria substituído as importações. Ambos os repositórios devem estar disponíveis pré-compilados em meu github. Você pode usar isso se não conseguir fazer a parte da babel.

@AnthonyNaha sinceramente obrigado por sua solução, está funcionando para mim com a última versão babel e angular 6.

@AnthonyNahas

Você é um deus meu amigo ...

Existem vários problemas que impedem que o pacote seja usado no lado do servidor por meio do Angular Universal. Já fiz um trabalho semelhante em várias bibliotecas (por exemplo, https://github.com/salemdar/ngx-cookie/pull/41, https://github.com/zefoy/ngx-perfect-scrollbar/pull/129, https://github.com/mattlewis92/angular-resizable-element/pull/80), então pensei em dar uma olhada.

Em suma, ao direcionar a plataforma de servidor com o Angular CLI, apenas o próprio aplicativo é compilado, já que o pacote UMD da biblioteca seria usado ao executá-lo no NodeJS. Como apontado por @AnthonyNahas , isso significa que o ponto de entrada do pacote main deve apontar para o referido pacote UMD, ou seja, algo que o NodeJS nativamente entende.

Além do pacote UMD nativo do NodeJS, as melhores práticas para bibliotecas de acordo com as diretrizes do formato de pacote angular é também publicar módulos ES compatíveis com AoT e arquivos de metadados metadata.json , o que esse pacote já faz. No entanto, devido a https://github.com/angular/angular-cli/issues/7200 , a construção do Angular Universal atualmente falha (com erros semelhantes a SyntaxError: Unexpected token export ) quando a referida biblioteca é publicada como módulos ES separados. de um achatado (fesm), pois as importações profundas seriam então resolvidas para os módulos ES, fazendo com que o Node falhe, pois não entende os módulos ES

A correção é usar angularCompilerOptions 's flatModuleOutFile & flatModuleId params, de acordo com https://angular.io/guide/aot-compiler , e passar a saída por meio de Rollup , para produzir arquivos de módulo e tipificações ES simples e, em seguida, defina-os como os pontos de entrada module e typings . Como essas opções requerem um ponto de entrada exclusivo por biblioteca, tive que dividir os principais arquivos tsconfig.json para oferecer suporte a js-marker-clusterer & snazzy-info-window .

Além disso, as configurações de rollup estavam definindo context: 'window' , que quebra no lado do servidor, que eu mudei de volta para o comportamento padrão "isto como indefinido" do Rollup (que embora seja um aviso, é na verdade o comportamento esperado).

Por último, agora que a compilação universal do seu aplicativo compila com esta biblioteca, você precisa decidir o que fazer em tempo de execução / tornar o código universal amigável, o que consegui usando isPlatformBrowser(this.platformId) no carregador do SDK do Google Maps load() função apenas para pular a injeção. Ele funciona em nosso caso de uso atual, mas a maioria das proteções pode ser necessária para desativar essa biblioteca no lado do servidor (já que o SDK do Google Maps não será executado lá de qualquer maneira).

De qualquer forma, o PR está em https://github.com/SebastianM/angular-google-maps/pull/1554 , comentários bem-vindos. Tenho um fork em execução em @ laurentgoudet / agm-core que estou usando com sucesso em meu projeto (até que este PR seja mesclado). Estou usando a CLI Angular, mas deve funcionar com qualquer construtor - feedback bem-vindo.

Depois de muitas tentativas, a solução fornecida por @AnthonyNahas me permitiu implantar um aplicativo universal como uma função firebase :).
Minha sugestão é verificar se os arquivos ts estão efetivamente transformados em js, caso estejam, o erro de importação / exportação não deve aparecer.

Editar (26/12/2018)
Eu corri para o problema novamente com o módulo da janela de informações snazzy. Acabei descobrindo que o babel não estava sendo executado quando eu estava usando o firebase deploy (lembre-se que ao implantar o AU como uma função firebase, uma instalação npm é executada, o que significa que o pacote será instalado novamente como arquivos ts). No final, eu apenas bifurquei a biblioteca (https://github.com/jota12x/angular-google-maps), apliquei o babel e instalei a partir do repo. Problema resolvido. (No entanto, aguardando a correção no repo principal).

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Alguma atividade sobre isso? É muito simples de corrigir - basta começar a usar @angular-devkit/build-angular . Este é um dos problemas mais sérios porque as pessoas têm 2 saídas:
1) Use configurações personalizadas do webpack
2) Use alguns hacks

e começar a usar @ angular-devkit / build-angular é bastante simples e pode economizar horas de hackeamento

@AnthonyNahas

_Atualizou a solução para a versão mais recente do babel_

@philippeboyd @dkmostafa i resolvido o mesmo problema recentemente para este módulo e outros como -> NGX traduzir e mais ...

solução (compilar os arquivos js em es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. adicione isso ao projeto raiz com o nome .babelrc ou adicione as predefinições diretamente via cli
   { "presets": ["@babel/preset-env"] }
3. adicione um script npm em package.json no escopo "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. adicione um script postinstall em package.json no escopo "scrtipsts"
   "postinstall": "npm run compile_@agm_core",
5. execute npm i para instalar os dep. Depois de instalar o deps, o script postinstall será executado e o babel irá compilar os arquivos js desejados
6. execute seu servidor e deve mundo
7. Dê-me um feedback se funcionar. Fiz o mesmo dilui para mais de 3 módulos npm que funciona na minha máquina: D

Muito obrigado, ainda funciona no Angular 7

Mas isso é um hack ... Ou solução alternativa ...

Na terça-feira, 2 de abril de 2019, 12h53 PEA [email protected] escreveu:

@AnthonyNahas https://github.com/AnthonyNahas

Atualizou a solução para a última versão do babel

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa eu resolvi o mesmo problema recentemente para este
módulo e outros como -> ngx traduzir e mais ...

solução (compilar os arquivos js em es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. adicione-o ao projeto raiz com o nome .babelrc ou adicione o
   predefinições diretamente via cli
   {"presets": ["@ babel / preset-env"]}
3. adicione um script npm em package.json no escopo "scrtipsts"
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. adicione um script postinstall em package.json no escopo "scrtipsts"
   "postinstall": "npm run compile_ @ agm_core ",
5. execute o npm i para instalar o deps. Depois de instalar o dep, o
   o script postinstall será executado e o babel irá compilar os arquivos js direcionados
6. execute seu servidor e deve mundo
7. Dê-me um feedback se funcionar. Fiz o mesmo dilui por mais
   de 3 módulos npm ele funciona na minha máquina: D

Muito obrigado, ainda funciona no Angular 7

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

Usei a solução de @AnthonyNahas mas estou recebendo este erro:

/node_modules/@agm/core/services/maps-api-loader/maps-api-loader.js:44
        type: _core.Injectable
                    ^

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 o problema não está relacionado diretamente à biblioteca ... parece ser um erro de compilação ...

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Vamos mudar para o ngc em breve, então esperamos que funcione com o Angular Universal. Pessoalmente, tenho 0 experiência e conhecimento em universal e AoT.

Ok, eu puxei o ng-packagr PR, então talvez agora funcione. Você pode tentar o bifurcação mestre e ver se funciona?

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Olá @ doom777
Você pode me dizer quando planeja lançar esta fusão? Eu adoraria abandonar minha versão corrigida desta biblioteca :)

Não depende de mim