Angular-google-maps: Angular 4 Universal - SyntaxError: exportación de token inesperada

Hola, tuve que lidiar con este problema que no es realmente un problema de Agm sino global.
La mayoría de los paquetes recientes, incluido Agm, están compuestos en es6, con palabras clave import y export .

Esto no era un problema antes de Universal, ya que siempre hay un archivo de paquete en los paquetes para, digamos, System.js para desarrollo local y Webpack / Rollup entenderá es6 para paquetes de producción.

Pero con Universal, usa directamente los archivos en node_modules, en es6 entonces, y el nodo aún no sabe acerca de los tokens import y export .

Se pueden hacer dos cosas, puede empaquetar su aplicación incluso para universal, pero perderá mucho tiempo de compilación solo para un paquete que es inútil en un contexto de servidor.

Otra opción, la que usé en mi empresa, es copiar todas sus fuentes en una carpeta tmp antes de compilar y crear una carpeta node_modules en esta carpeta tmp.
Luego puede copiar toda la carpeta @agm (la que está en la carpeta "real" node_module en la carpeta "falsa" en tmp. Luego podrá usar babel para transformar los archivos es6 copiados en la carpeta falsa node_modules en commonjs que nodejs lo entenderá (cuando necesite @agm, el nodo buscará el archivo en la carpeta falsa node_modules)

Esto es muy molesto y realmente no hay otras opciones por ahora (avíseme si encuentra una mejor). Realmente creo que los módulos ng2 tienen que encontrar una manera de proporcionar archivos es6 y commonjs si quieren que sus módulos sean fáciles de usar con universal :)

Utilice webpack.config

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

@kkaabbaa, ¿puedes confirmar que esto funciona?
Simplemente agregarlo a mi paquete web no hizo el trabajo.

tengo el mismo problema, tengo babel e hice una copia del proyecto en una nueva carpeta y luego tengo babel instalado localmente, pero me gustaría entender el proceso que Adrienboulle hace para su empresa porque tengo que terminar esto cosa gracias de antemano.

Lo agregué a webpack.config y no me funciona.

externos: [nodeExternals ({
lista blanca: [
/ ^ @ agm / core /,
]
})],

Lo tengo funcionando con una solución al cargar dinámicamente un componente que contiene mi mapa de agm en función de si es el navegador o el servidor: https://angular.io/guide/dynamic-component-loader

He compilado a es5 pero también mostrando error

Finalmente capaz de utilizar el mapa de Google con universal. Estoy haciendo repositorio y video

Usé esta publicación https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angular-cli-db8b53bba07d

y agregado

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

@kkaabbaa, ¿ dónde

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

Todavía no funciona, probé la solución @kkaabbaa , pero no funcionó para mí, el mismo problema

_Actualizada la solución a la última versión de babel_

@philippeboyd @dkmostafa resolví el mismo problema recientemente para este módulo y otros como -> ngx translate y más ...

solución (compile los archivos js en es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. agregue esto al proyecto raíz con el nombre .babelrc o agregue los ajustes preestablecidos directamente a través de cli
   { "presets": ["@babel/preset-env"] }

3. agregue un script npm en package.json en el alcance "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. agregue un script postinstall en package.json en el alcance "scrtipsts"
   "postinstall": "npm run compile_@agm_core",

5. ejecute npm i para instalar los deps. Después de instalar los deps, el script postinstall se ejecutará y babel compilará los archivos js de destino

6. ejecute su servidor y el mundo debería

7. Por favor, dame tu opinión si funciona. Hice lo mismo para más de 3 módulos npm, funciona en mi máquina: D

@AnthonyNa tiene una idea muy interesante. ¡Parece demasiado bueno para ser verdad! Voy a darle una oportunidad

¿Alguien tiene una solución para esto? Recientemente también encontré esto.

@adrienboulle gracias por explicarme las cosas, ahora me pregunto: ¿no sería mejor lanzar el paquete en un formato diferente que también sea adecuado para Angular Universal? De esa manera, ya no serían necesarias todas las soluciones que circulan aquí. ¿O sería posible hacer que Angular Universal entienda el código ES6?

@AnthonyNahas Lo intenté. Ahora muestra otro error

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

@AnthonyNahas , ¡muchas gracias por tu solución! ¡Probé varias otras soluciones que no funcionaron para mí durante aproximadamente un mes! Esto realmente resuelve mi problema =)

@karthikeyanmanureva u debería hacer lo mismo para otro módulo npm que arroja "SyntaxError: Importación de token inesperada" ...
@martinreus salud

@AnthonyNa, esto funcionó para mí, no sé cómo se te ocurrió esa solución, pero gracias,

@AnthonyNahas , tu solución me ha ayudado a resolver este problema

@AnthonyNahas , gracias, por un módulo funcionó. Pero ahora estoy usando otro paquete ng2-slim-loading-bar y arroja un error:

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

¿Alguna idea de cómo puedo solucionarlo?

agréguelo a la sección de exclusión y el paquete web al menos pruébelo para ver si
obras

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

@AnthonyNahas https://github.com/anthonynahas , gracias, por un módulo
funcionó. Pero ahora estoy usando otro paquete ng2-slim-loading-bar
https://github.com/akserg/ng2-slim-loading-bar y arroja un error:

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

exportar estilos const
^^^^^^

SyntaxError: exportación de token inesperada

¿Alguna idea de cómo puedo solucionarlo?

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo agrega un nuevo script npm para transpilar el módulo ng2-slim ...
-> agregar un script npm en package.json en el alcance "scrtipsts"
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

entonces ->

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 ",

-> después de eso, ejecute npm i una vez más

-> resultado
el otro módulo también debe transpilarse

@AnthonyNahas muchas gracias

@AnthonyNahas , como mencioné ya tengo un script que transpila este módulo a 2015. Tengo una forma un poco diferente, pero la idea es la misma. Así que tengo:

    "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"

¿O es importante hacerlo exactamente a su manera, durante postinstall hook?

@AnthonyNahas , intenté compilar en 2015 durante postinstall hook, pero de todos modos aparece un error. Creo que el archivo client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle generado por Angular, pero no tengo idea de cómo hacerlo funcionar.

@lomboboo

en postinstall no es importante!

¿Ese bloque es el mismo que usaste en tu proyecto?

Encontré un error en el primer script npm: es posible que deba transpilar otros archivos que no sean estos archivos en el 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",

debería ser (después) ->

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

PD: si ejecuta un script npm desde la terminal, puede usar babel lugar de node_modules/babel-cli/bin/babel.js . El otro solo es útil cuando ejecuta sus tareas inmediatamente desde la terminal y no a través de npm ...

Acabo de bifurcar este repositorio y pronto proporcionaré una mejor solución para resolver este tipo de errores, como la exportación / importación inesperada de tokens ... para que el desarrollador pueda usar este módulo sin transpilar manualmente los archivos src y ejecutar un script npm personalizado ..

@AnthonyNahas MVP

@AnthonyNahas , así que terminé con esta solución. Creé webpack.config.js , que es para el servidor y lo configuré así:

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' }
    ]
  }
};

Por lo tanto, debe instalar webpack y webpack-node-externals localmente. Dentro de nodeExternals puede definir complementos, paquetes que no necesita cuando el servidor compila. En mi caso, es el complemento ng2-slim-loading-bar el que arroja el error que describí.
Y finalmente simplemente agregue webpack a package.json cuando ejecute el script del servidor. Mi package.json ve así:

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

Si no tiene el nombre estándar de webpack.config.js , debe especificar el nombre correcto como argumento webpack . Por ejemplo,

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

Espero que ayude a alguien. En mi opinión, es una solución más robusta que compilar cada complemento con el que su servidor tiene problemas.

@AnthonyNahas estoy enfrentando el mismo problema y probé su solución, pero
Qué hacer para el siguiente punto que proporcionó en la solución

• agregue esto al proyecto raíz con el nombre .babelrc
  {"presets": ["es2015"]}

@Harshketu
en su proyecto, en el nivel superior (raíz) -> cree un archivo con el nombre .babelrc y péguelo
lo siguiente -> { "presets": ["es2015"] } <- en ese archivo

@AnthonyNahas
¿Su solución funciona con el archivo webpack.config o sin él?

depende de si se expulsa su proyecto.
Sin embargo, la transpilación del código a es5 no tiene una dependencia directa del archivo webpack.config

Siguiendo a @AnthonyNahas su solución,

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

Puede ser de utilidad para cualquiera. Estoy usando Firebase Hosting y, por alguna razón, Firebase no parece estar compilando el código aunque estoy usando exactamente el mismo método descrito por Anthony en el package.json para Firebase. Por eso utilizo esta solución.

@cmddavid También encontré este problema en firebase. No funcionará en firebase porque vuelve a instalar módulos de nodo y no tiene babel-cli instalado globalmente.

@dockleryxk, ¿significa esto que mi solución es la única solución viable cuando se usa Firebase?

No entiendo completamente por qué Firebase está instalando todos los módulos nuevamente. ¿No es suficiente el paquete de servidor que se genera en el cliente antes de la implementación? Por lo que puedo decir, el script de nodo que ejecuta la función Firebase solo requiere un conjunto muy limitado de paquetes de nodos. Ciertamente no el paquete @agm/core . Dado que el paquete del servidor ya se está enviando al servidor durante la implementación.

@cmddavid Potencialmente, podría llevar mucho tiempo cargar un directorio de módulos de nodo, supongo que por qué, pero en realidad no lo sé. Personalmente, coloco los módulos compilados en un directorio dentro del directorio de funciones y solo lo hago referencia desde el package.json en el directorio de funciones. Por ejemplo "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNa ha salvado mi día. Estuve luchando para poner en funcionamiento este renderizado Angular Universal Server Side desde hace semanas. ¡Tu solución funcionó a las mil maravillas!

@AnthonyNahas , @agm , después de ver la sintaxis de ES6, lo primero que pensé fue compilar usando el paquete web, que es muy inteligente (al menos para mí), de todos modos, gracias de nuevo, tengo la configuración ¡Angular Universl SSR y absolutamente bien ahora!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], hizo el trabajo por mí. Gracias. De lo contrario, la solución

Tuve el mismo problema con uno de mis propios paquetes, y resultó que hacer que el paquete "Formato de paquete angular" fuera compatible funcionó. Este es un paquete npm muy útil para ayudar con eso: https://github.com/dherges/ng-packagr

Es prácticamente plug and play.

@AnthonyNahas. Esto también me está funcionando.
Gracias

¿Todavía tienen problemas con esto? Estoy usando este módulo en un proyecto universal y todo es un archivo de trabajo listo para usar. ¿Qué versiones estás usando?

Hola @AnthonyNahas , parece que no puedo hacer que esto funcione para ng2-google-place-autocomplete

Recibo este mensaje de error:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
exportar * desde './src/index';
^^^^^^

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

Luego seguí tus pasos:

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

2. agregue esto al proyecto raíz con el nombre .babelrc
   {"presets": ["es2015"]}

3. agregue este script a mi archivo package.json

"guiones": {
"compile_ng2-google-place-autocomplete": "babel node_modules / ng2-google-place-autocomplete -d node_modules / ng2-google-place-autocomplete --presets es2015",
"prearranque": "ng build --prod && ngc",
"inicio": "ts-node src / server.ts",
"postinstall": "npm ejecutar compile_ng2-google-place-autocomplete"
}

1. ejecute npm i para instalar el deps. Después de instalar los deps, el script postinstall se ejecutará y babel compilará los archivos js de destino

2. Ejecutar npm ejecutar iniciar

3. Sigo recibiendo el mismo error.

Si pudieras ayudarme, sería de gran ayuda, ¡ya que he pasado horas tratando de solucionar este problema!

@dockleryxk , @AnthonyNahas , @cmddavid es una forma más simple y fácil ...
hilo agregar agm-compilado. Sin webpack y sytemjs sin sentido, trabaja angular5 ^ + universal + ssr + firebase hosting / functions.

@retrwood eso es genial, sin embargo, sería bueno tener una versión NPM disponible también.

Gracias @AnthonyNahas ,
Me salvaste el día, es realmente un gran trabajo, ya que no estaba de acuerdo con expulsar la herramienta CLI.

Muchas gracias.

@AnthonyNahas babel-preset-es2015 está obsoleto ahora. ¿Cómo podemos manejar este problema?

@Gomathipriya ¡ gracias por preguntar! ¡Me diste la motivación para enviar finalmente una solicitud de extracción!

21.9.2017 , ¡publiqué una solución para manejar este error! En ese momento, no sabía que la biblioteca estaba generando el código de escritura como bundle, es5 ... ¡Tenía demasiados proyectos y no pude encontrar lo que realmente estaba mal con @ agm / core ! Bueno, ayer estaba desarrollando extensiones de material angular para aplicaciones angulares que usan @ agm / core y enfrenté el mismo problema mientras probaba con jest . Así que decidí echar un vistazo más a fondo a este proyecto y encontré algo interesante.

En realidad, ya no necesitamos transpilar el código a es5 ya que la compilación de este proyecto ya lo hizo por nosotros. ¡Pero el mecanografiado no los conoce! Alguna información se pierde en el package.json .

Así que consejo para resolver eso:

1. ir a cd node_modules
2. cd \@agm/core
3. abre el package.json
4. y agregue lo siguiente

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

¡y el error debería resolverse! ¡Ahora, al compilar, el mecanografiado elegirá el código js correcto!

¡Envié hace unos segundos una solicitud de extracción!

¡Apoye este PR después de probarlo en su máquina!

Lo pruebo en el siguiente escenario aquí en este proyecto @ angular-material-extensions / google-maps-autocomplete

Si te gusta el proyecto, por favor apóyame protagonizando y compartiéndolo.

Gracias a todos 👍 ❤️

Hay noticias ? @SebastianM

@bastienlemaitre ajustaré mi PR

echa un vistazo aquí:

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

¡Dime si el truco te sirvió!

@AnthonyNahas también estamos viendo el mismo problema con el paquete map clusterer. Muy frustrante, agradezco que se haya tomado el tiempo de trabajar en ello. ¿Existe una solución propuesta que pueda implementar mientras se revisa el RP?

Puedo agregar esto manualmente para que nuestras pruebas pasen, pero aún fallará en la canalización.

@Gomathipriya Acabo de actualizar la solución publicada anteriormente a la última versión de babel v7.1.0, y probé el proceso en mi propio npm mobule @ angular-material-extensions / google-maps-autocomplete

comprobar el estado de circleci aquí

estado de travis-ci aquí

@mcblum probablemente debería hacer lo mismo que el módulo principal (consulte la solución publicada anteriormente)

salud 🍻

Agm es realmente increíble y útil, pero desafortunadamente no pude ayudar con respecto a las relaciones públicas, probablemente demasiado complicado para mí.

Así que decidí implementar un código personalizado para la API de JavaScript de Google Maps que se convirtió en un nuevo componente web llamado

Una vez más, Agm es increíble y este componente web no ofrece tantas posibilidades como esta biblioteca. Solo pensé en escribir estas líneas y mencionarlas en caso de que alguien que enfrenta el problema tenga prisa por encontrar una solución potencial, nada más, nada más.

No tengo ningún problema durante la construcción, pero cuando solicito una página que se supone que está renderizada en el lado del servidor, aparece el siguiente error:

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 tal vez intente una solución rápida: muestre su mapa solo en el lado del navegador, no hay ningún elemento window en el lado del servidor (es por eso que podría construirse pero falla en tiempo de ejecución)

pseudo código:

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

@AnthonyNaha intentado su solución pero todavía tengo el mismo error.
Estoy tratando de implementar mi paquete de servidor en la función Cloud Fire ...

sin agm todo está bien / funcionando pero con agm obtuvo un error

funciones [ssr (us-central1)]: Error de implementación.
Error de carga de función: no se puede cargar el código del archivo index.js.
¿Hay un error de sintaxis en su código?
Seguimiento de pila detallado: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(función (exporta, requiere, módulo, __filename, __dirname)
{importar {Inyectable, NgZone} desde '@ angular / core';
^^^^^^

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

por favor, responda

Eso significa que el compilador de babel no hizo su trabajo ya que habría reemplazado las importaciones. Ambos repositorios deberían estar disponibles precompilados en mi github. Puede usar eso si no puede hacer la parte de babel.

@AnthonyNa, honestamente, gracias por su solución, me está funcionando con la última versión de babel y angular 6.

@AnthonyNahas

Tu eres un dios mi amigo ...

Existen varios problemas que impiden que ese paquete se use en el lado del servidor a través de Angular Universal. Ya hice un trabajo similar en varias bibliotecas (por ejemplo, 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), así que pensé en echarle un vistazo.

En resumen, cuando se dirige a la plataforma del servidor con Angular CLI, solo se compila la aplicación en sí, ya que el paquete de biblioteca UMD se usaría al ejecutarlo en NodeJS. Como señaló @AnthonyNahas , esto significa que el punto de entrada del paquete main debe apuntar a dicho paquete UMD, es decir, algo que NodeJS entienda de forma nativa.

Además del paquete UMD nativo de NodeJS, las mejores prácticas para las bibliotecas según las pautas del formato de paquete angular es publicar también módulos ES compatibles con AoT y archivos de metadatos metadata.json , que ese paquete ya hace. Sin embargo, debido a https://github.com/angular/angular-cli/issues/7200 , la compilación de Angular Universal falla actualmente (con errores similares a SyntaxError: Unexpected token export ) cuando dicha biblioteca se publica como módulos ES separados en su lugar de uno plano (fesm), ya que las importaciones profundas se resolverían luego en los módulos ES, lo que provocaría que Node fallara ya que no comprende los módulos ES

La solución es utilizar angularCompilerOptions 's flatModuleOutFile y flatModuleId params, como por https://angular.io/guide/aot-compiler , y pasar la salida a través Rollup , para producir módulos ES planos y archivos de tipificación, y luego configurarlos como los puntos de entrada module y typings . Dado que esas opciones requieren un punto de entrada único por biblioteca, tuve que dividir los archivos principales tsconfig.json para admitir js-marker-clusterer & snazzy-info-window .

Además, las configuraciones de resumen establecían context: 'window' , que se rompe en el lado del servidor, que cambié de nuevo al comportamiento predeterminado de Rollup "esto como indefinido" (que, aunque es una advertencia, es en realidad el comportamiento esperado).

Por último, ahora que la compilación universal de su aplicación se compila con esta biblioteca, debe decidir qué hacer en tiempo de ejecución / hacer que el código en sí sea compatible con Universal, lo que logré usando isPlatformBrowser(this.platformId) en el cargador de SDK de Google Maps load() función para omitir la inyección. Hace el truco para nuestro caso de uso actual, pero la mayoría de las salvaguardias podrían ser necesarias para deshabilitar esa biblioteca en el lado del servidor (ya que el SDK de Google Maps no se ejecutará allí de todos modos).

De todos modos, el PR está en https://github.com/SebastianM/angular-google-maps/pull/1554 , comentarios bienvenidos. Tengo una bifurcación ejecutándose en @ laurentgoudet / agm-core que estoy usando con éxito para mi proyecto (hasta que este PR se fusione). Estoy usando la CLI de Angular, pero debería funcionar con cualquier constructor; comentarios bienvenidos.

Después de muchos intentos, la solución proporcionada por @AnthonyNa me permitió implementar una aplicación universal como función de base de fuego :).
Mi sugerencia es verificar si los archivos ts se transformaron efectivamente en js, si lo están, entonces el error sobre importación / exportación no debe aparecer.

Editar (26/12/2018)
Corro al problema de nuevo con el elegante módulo de ventana de información. Terminé descubriendo que babel no se estaba ejecutando cuando estaba usando firebase deploy (recuerde que al implementar AU como una función de firebase, se realiza una instalación npm, lo que significa que el paquete se instalará nuevamente como archivos ts). Al final, acabo de bifurcar la biblioteca (https://github.com/jota12x/angular-google-maps), aplicar babel e instalarlo desde el repositorio. Problema resuelto. (Sin embargo, esperando la corrección en el repositorio principal).

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Alguna actividad sobre esto? Es bastante simple de arreglar, solo necesita comenzar a usar @angular-devkit/build-angular . Este es uno de los problemas más graves porque las personas tienen 2 salidas:
1) Utilice configuraciones de paquete web personalizadas
2) Usa algunos trucos

y comenzar a usar @ angular-devkit / build-angular es bastante simple y podría ahorrar horas de piratería

@AnthonyNahas

_Actualizada la solución a la última versión de babel_

@philippeboyd @dkmostafa resolví el mismo problema recientemente para este módulo y otros como -> ngx translate y más ...

solución (compile los archivos js en es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. agregue esto al proyecto raíz con el nombre .babelrc o agregue los ajustes preestablecidos directamente a través de cli
   { "presets": ["@babel/preset-env"] }
3. agregue un script npm en package.json en el alcance "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. agregue un script postinstall en package.json en el alcance "scrtipsts"
   "postinstall": "npm run compile_@agm_core",
5. ejecute npm i para instalar los deps. Después de instalar los deps, el script postinstall se ejecutará y babel compilará los archivos js de destino
6. ejecute su servidor y el mundo debería
7. Por favor, dame tu opinión si funciona. Hice lo mismo para más de 3 módulos npm, funciona en mi máquina: D

Muchas gracias, todavía funciona en Angular 7

Pero eso es un truco ... O una solución alternativa ...

El martes 2 de abril de 2019 a las 12:53 p. M. PEA [email protected] escribió:

@AnthonyNahas https://github.com/AnthonyNahas

Actualización de la solución a la última versión de babel.

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa resolví el mismo problema recientemente para esto
módulo y otros como -> ngx translate y más ...

solución (compile los archivos js en es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. agregue esto al proyecto raíz con el nombre .babelrc o agregue el
   presets directamente a través de cli
   {"presets": ["@ babel / preset-env"]}
3. agregue un script npm en package.json en el alcance "scrtipsts"
   " compile_ @ agm_core ": "
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. agregue un script postinstall en package.json en el alcance "scrtipsts"
   "postinstall": "npm ejecutar compile_ @ agm_core ",
5. ejecute npm i para instalar el deps. Después de instalar los deps, el
   La secuencia de comandos postinstall se ejecutará y babel compilará los archivos js de destino
6. ejecute su servidor y el mundo debería
7. Por favor, dame tu opinión si funciona. Hice lo mismo por más
   de 3 módulos npm funciona en mi máquina: D

Muchas gracias, todavía funciona en Angular 7

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

He usado la solución de @AnthonyNahas pero recibo este error:

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

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 el problema no está relacionado directamente con la biblioteca ... parece ser un error de compilación ...

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Pronto nos trasladaremos a ngc, por lo que es de esperar que funcione con Angular Universal. Personalmente, tengo 0 experiencia y conocimiento en universal, y AoT.

Ok, utilicé ng-packagr PR, así que tal vez ahora funcione. ¿Puedes intentar bifurcar master y ver si funciona?

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Hola @ doom777
¿Puede decirme cuándo planea lanzar esta fusión? Me encantaría dejar caer mi versión parcheada de esta biblioteca :)

No depende de mí