Angular-google-maps: Angular 4 Universal - SyntaxError: exportation de jeton inattendue

Bonjour, j'ai dû faire face à ce problème qui n'est pas vraiment un problème Agm mais un problème mondial.
La plupart des packages récents, y compris Agm, sont compilés en es6, avec des mots-clés import et export .

Ce n'était pas un problème avant Universal car il y a toujours un fichier bundle dans les packages pour disons que System.js pour le développement local et Webpack / Rollup comprendra es6 pour les bundles de production.

Mais avec Universal, vous utilisez directement les fichiers dans les node_modules, dans es6 alors, et node ne connaît pas encore les jetons import et export .

Deux choses peuvent être faites, vous pouvez regrouper votre application même pour l'universel, mais vous perdrez beaucoup de temps de compilation juste pour un bundle qui est inutile dans un contexte de serveur.

Une autre option, celle que j'ai utilisée dans mon entreprise, est de copier toutes vos sources dans un dossier tmp avant de les compiler et de créer un dossier node_modules dans ce dossier tmp.
Vous pourrez alors copier tout le dossier @agm (celui du dossier "real" node_module dans le "faux" dans tmp. Vous pourrez alors utiliser babel pour transformer les fichiers es6 copiés dans le faux dossier node_modules en commonjs qui nodejs comprendra. (lorsque vous aurez besoin de @agm, node cherchera le fichier dans le faux dossier node_modules)

C'est super ennuyeux et il n'y a pas vraiment d'autres options pour le moment (faites-moi savoir si vous en trouvez une meilleure). Je pense vraiment que les modules ng2 doivent trouver un moyen de fournir à la fois les fichiers es6 et commonjs s'ils veulent que leurs modules soient faciles à utiliser avec universal :)

Utilisez webpack.config

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

@kkaabbaa pouvez-vous confirmer que cela fonctionne?
Le simple fait de l'ajouter à mon pack Web n'a pas permis de faire le travail.

j'ai le même problème, j'ai babel et j'ai fait une copie du projet dans un nouveau dossier puis j'ai installé babel localement mais j'aimerais comprendre le processus qu'Adrienboulle a réalisé pour son entreprise parce que je dois obtenir ce chose merci d'avance.

Je l'ai ajouté à webpack.config et cela ne fonctionnera pas pour moi.

externes: [nodeExternals ({
liste blanche: [
/ ^ @ agm / core /,
]
})],

Je le fais fonctionner avec une solution de contournement en chargeant dynamiquement un composant qui contient ma carte agm en fonction du fait qu'il s'agit du navigateur ou du serveur: https://angular.io/guide/dynamic-component-loader

J'ai compilé en es5 mais affiche également une erreur

Enfin capable d'utiliser google map avec universal. Je fais du repo et de la vidéo

J'ai utilisé ce post https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angular-cli-db8b53bba07d

et ajouté

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

@kkaabbaa où avez-vous ajouté, s'il vous plaît?

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

Ne fonctionne toujours pas, j'ai essayé la solution @kkaabbaa , mais cela

_Mise à jour de la solution vers la dernière version de babel_

@philippeboyd @dkmostafa J'ai résolu le même problème récemment pour ce module et d'autres comme -> ngx translate et plus ...

solution (compilez les fichiers js dans es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. ajoutez ceci au projet racine sous le nom .babelrc ou ajoutez les presets directement via cli
   { "presets": ["@babel/preset-env"] }

3. ajouter un script npm dans package.json dans la portée "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. ajouter un script de post-installation dans package.json dans la portée "scrtipsts"
   "postinstall": "npm run compile_@agm_core",

5. exécutez npm i pour installer les deps. Après avoir installé le deps, le script postinstall s'exécutera et babel compilera les fichiers js ciblés

6. exécuter votre serveur et devrait monde

7. Donnez-moi s'il vous plaît des commentaires si cela fonctionne. J'ai fait les mêmes minces pour plus de 3 modules npm cela fonctionne sur ma machine: D

@AnthonyNahas c'est une idée très intéressante. Cela semble trop beau pour être vrai! Je vais essayer

Quelqu'un a-t-il une solution pour cela? Je viens de rencontrer cela aussi.

@adrienboulle merci d'avoir expliqué les choses, maintenant je me demande: ne serait-il pas préférable de publier le package dans un format différent qui convient également à Angular Universal? De cette façon, toutes les solutions de contournement qui circulent ici ne seraient plus nécessaires. Ou serait-il possible de faire comprendre le code ES6 à Angular Universal?

@AnthonyNahas j'ai essayé ça. Maintenant, il montre une autre erreur

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

@AnthonyNahas , merci beaucoup pour votre solution! J'ai essayé plusieurs autres solutions qui n'ont pas fonctionné pour moi pendant environ un mois! Cela résout en fait mon problème =)

@karthikeyanmanureva vous devriez faire la même chose pour un autre module npm qui lance "SyntaxError: Importation de jeton inattendue" ...
@martinreus acclamations

@AnthonyNa a fonctionné pour moi, je ne sais pas comment vous avez trouvé cette solution mais merci,

@AnthonyNahas ， votre solution m'a aidé à résoudre ce problème

@AnthonyNahas , merci, pour un module cela a fonctionné. Mais maintenant, j'utilise un autre paquet ng2-slim-loading-bar et cela génère une erreur:

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

Une idée comment puis-je résoudre ce problème?

ajoutez-le à la section d'exclusion et le Webpack au moins essayez-le pour voir s'il
travaux

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

@AnthonyNahas https://github.com/anthonynahas , merci, pour un module
ça a marché. Mais maintenant j'utilise un autre paquet ng2-slim-loading-bar
https://github.com/akserg/ng2-slim-loading-bar et cela génère une erreur:

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

styles d' export const
^^^^^^

SyntaxError: exportation de jeton inattendue

Une idée comment puis-je résoudre ce problème?

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo ajoute un nouveau script npm pour transpiler le module ng2-slim ...
-> ajouter un script npm dans package.json dans la portée "scrtipsts"
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

puis ->

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

-> après cela, exécutez npm i une fois de plus

-> résultat
l'autre module doit être transpilé aussi

@AnthonyNahas merci beaucoup

@AnthonyNahas , comme je l'ai mentionné, j'ai déjà un script qui transpile ce module en 2015. J'ai une manière un peu différente, mais l'idée est la même. Donc j'ai:

    "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 il est important de faire exactement votre chemin, pendant postinstall hook?

@AnthonyNahas , j'ai essayé de compiler jusqu'en 2015 pendant postinstall hook, mais une erreur apparaît quand même. Je pense que le fichier client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle généré par Angular, mais je n'ai aucune idée de comment le faire fonctionner.

@lomboboo

sur postinstall ce n'est pas important!

Est-ce que ce bloc est le même que celui que vous avez utilisé dans votre projet?

J'ai trouvé un bogue dans le premier script npm: vous devrez peut-être transpiler d'autres fichiers que ces fichiers dans le src ->

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

devrait être (après) ->

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

PS: si vous exécutez un script npm depuis le terminal, vous pouvez utiliser babel au lieu de node_modules/babel-cli/bin/babel.js . L'autre n'est utile que lorsque vous exécutez vos tâches immédiatement à partir du terminal et non via npm ...

Je viens de fourcher ce repo et je vais bientôt fournir une meilleure solution pour résoudre ce genre d'erreurs, comme l'exportation / importation de jetons inattendue ... afin que le développeur puisse utiliser ce module sans transpiler manuellement les fichiers src et exécuter un script npm personnalisé ..

@AnthonyNahas MVP

@AnthonyNahas , donc j'ai fini avec cette solution. J'ai créé webpack.config.js , qui est pour le serveur et le configure comme ceci:

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

Vous devez donc installer localement webpack et webpack-node-externals . À l'intérieur de nodeExternals, vous pouvez définir des plugins, des packages dont vous n'avez pas besoin lors de la compilation du serveur. Dans mon cas, c'est le plugin ng2-slim-loading-bar qui génère l'erreur que j'ai décrite.
Et enfin, ajoutez simplement webpack à package.json lorsque vous exécutez le script serveur. Mon package.json ressemble à ceci:

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

Si vous n'avez pas de nom standard de webpack.config.js vous devez spécifier le nom correct comme argument webpack . Par example,

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

J'espère que cela aidera quelqu'un. À mon avis, c'est une solution plus robuste que la compilation de tous les plugins avec lesquels votre serveur a des problèmes.

@AnthonyNahas je suis confronté au même problème et j'ai essayé votre solution mais
Que faire pour le point ci-dessous que vous avez donné dans la solution

• ajoutez ceci au projet racine sous le nom .babelrc
  {"préréglages": ["es2015"]}

@Harshketu
dans votre projet, au niveau supérieur (racine) -> créez un fichier avec le nom .babelrc et collez
ce qui suit -> { "presets": ["es2015"] } <- dans ce fichier

@AnthonyNahas
votre solution fonctionne-t-elle avec le fichier webpack.config ou sans?

cela dépend si votre projet est éjecté .
Cependant, la transpilation du code dans es5 n'a pas de dépendance directe avec le fichier webpack.config

Suite à @AnthonyNahas sa solution, j'ai poussé une version compilée vers git afin que l'on puisse l'utiliser directement dans package.json sans avoir à installer babel etc:

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

Pourrait être utile à n'importe qui. J'utilise Firebase Hosting, et pour une raison quelconque, Firebase ne semble pas compiler le code même si j'utilise exactement la même méthode que celle décrite par Anthony sur le package.json pour Firebase. C'est pourquoi j'utilise cette solution de contournement.

@cmddavid J'ai également rencontré ce problème sur Firebase. Cela ne fonctionnera pas sur Firebase car il installe à nouveau les modules de nœuds et n'a pas installé babel-cli globalement.

@dockleryxk , cela signifie-t-il que ma solution est la seule solution viable lors de l'utilisation de Firebase?

Je ne comprends pas parfaitement pourquoi Firebase installe à nouveau tous les modules. Le bundle de serveurs qui est généré sur le client avant le déploiement n'est-il pas suffisant? Pour autant que je sache, le script de nœud exécuté par la fonction Firebase ne nécessite qu'un ensemble très limité de packages de nœuds. Certainement pas le package @agm/core . Étant donné que l'offre groupée de serveurs est déjà envoyée au serveur lors du déploiement.

@cmddavid Cela pourrait potentiellement prendre beaucoup de temps pour télécharger un répertoire de modules de nœuds, je suppose pourquoi, mais je ne sais pas vraiment. Personnellement, je place les modules compilés dans un répertoire à l'intérieur du répertoire functions et je le référence simplement à partir du package.json dans le répertoire functions. Par exemple "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNa a sauvé ma journée. Avait du mal à obtenir ce rendu Angular Universal Server Side opérationnel depuis des semaines maintenant. Votre solution a fonctionné comme un charme !!

@AnthonyNahas , @agm , après avoir vu la syntaxe ES6, j'ai d'abord pensé à compiler à l'aide de webpack qui est une méthode éprouvée (du moins pour moi), de toute façon merci encore, j'ai configuré Angular Universl SSR et tout à fait bien maintenant!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], fait le travail pour moi. Merci. Sinon, la solution @AnthonyNahas devrait faire l'affaire.

J'ai eu le même problème avec l'un de mes propres packages, et il s'est avéré que rendre le package "Angular Package Format" compatible a fait l'affaire. Ceci est un package npm très utile pour vous aider: https://github.com/dherges/ng-packagr

C'est à peu près plug and play.

@AnthonyNahas. Cela fonctionne aussi pour moi.
Merci

Avez-vous encore des problèmes avec ça? J'utilise ce module dans un projet universel et c'est tout un fichier de travail prêt à l'emploi. Quelles versions utilisez-vous?

Salut @AnthonyNahas , je n'arrive pas à faire fonctionner cela pour ng2-google-place-autocomplete

Je reçois ce message d'erreur:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
export * depuis './src/index';
^^^^^^

SyntaxError: exportation de jeton inattendue
à createScript (vm.js: 80: 10)
à Object.runInThisContext (vm.js: 139: 10)
à Module._compile (module.js: 599: 28)
à Module._extensions..js (module.js: 646: 10)
à Object.require.extensions. (fonction anonyme) [as .ts] (C: \ Users \ Andrenode_modulests-node \ srcindex.ts: 392: 14)
à Module.load (module.js: 554: 32)
à tryModuleLoad (module.js: 497: 12)
à Function.Module._load (module.js: 489: 3)
à Module.require (module.js: 579: 17)
à require (internal / module.js: 11: 18) `

J'ai ensuite suivi vos pas:

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

2. ajoutez ceci au projet racine sous le nom .babelrc
   {"préréglages": ["es2015"]}

3. ajouter ce script à mon fichier package.json

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

1. exécutez npm i pour installer les deps. Après avoir installé le deps, le script postinstall s'exécutera et babel compilera les fichiers js ciblés

2. Lancer npm run start

3. J'obtiens toujours l'erreur la même erreur.

Si vous pouviez m'aider, ce serait vraiment très utile car j'ai passé des heures à essayer de résoudre ce problème!

@dockleryxk , @AnthonyNahas , @cmddavid est un moyen plus simple et plus facile ...
yarn add compilé par agm. Sans webpack et sytemjs nonsens, travaillez angular5 ^ + universal + ssr + firebase hébergement / fonctions.

@retrwood c'est super, ce serait bien d'avoir une version NPM disponible aussi.

Merci @AnthonyNahas ,
Vous m'avez sauvé la journée, c'est vraiment un excellent travail, car je n'étais pas d'accord avec l'éjection de l'outil cli.

Merci beaucoup.

@AnthonyNahas babel-preset-es2015 est désormais obsolète. Comment pouvons-nous gérer ce problème?

@Gomathipriya merci d'avoir demandé! Vous m'avez motivé pour enfin envoyer une pull request!

21.9.2017 , j'ai publié une solution pour gérer ce bug! À ce moment-là, je ne savais pas que la bibliothèque générait le code d'écriture comme bundle, es5 ... J'avais trop de projets et je n'ai pas pu trouver ce qui ne va vraiment pas avec @ agm / core ! Eh bien, hier, je développais des extensions de matériau angulaire pour les applications angulaires qui utilisent @ agm / core et j'ai rencontré le même problème en testant avec jest . J'ai donc décidé de jeter un œil sur ce projet et j'ai trouvé quelque chose d'intéressant.

En fait, nous n'avons plus besoin de transpiler le code en es5 puisque la construction de ce projet l'a déjà fait pour nous. Mais dactylographié ne les connaît pas! Certaines informations sont manquées dans le package.json .

Alors astuce pour résoudre ça:

1. aller à cd node_modules
2. cd \@agm/core
3. ouvrir le package.json
4. et ajoutez ce qui suit

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

et le bug devrait être résolu! Maintenant, lors de la compilation, dactylographié choisira le bon code js!

J'ai envoyé il y a quelques secondes une pull request!

Veuillez soutenir ce PR après l'avoir testé sur votre machine!

Je le teste le scénario suivant ici dans ce projet @ angular-material-extensions / google-maps-autocomplete

si vous aimez le projet, soutenez-moi s'il vous plaît en mettant en vedette et partagez-le!

Merci à tous 👍 ❤️

Des nouvelles ? @SebastianM

@bastienlemaitre je vais ajuster mon PR

jetez un oeil ici:

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

dites si l'astuce l'a fait pour vous!

@AnthonyNaa nous voyons également ce même problème avec le package de

Je peux l'ajouter manuellement pour que nos tests réussissent, mais cela échouera toujours dans le pipeline.

@Gomathipriya Je viens de mettre à jour la solution publiée ci-dessus avec la dernière version de babel v7.1.0, et j'ai testé le processus dans mon propre npm mobule @ angular-material-extensions / google-maps-autocomplete

vérifier le statut de circleci ici

statut de travis-ci ici

@mcblum vous devriez probablement la même chose que le module principal (voir la solution publiée ci-dessus)

bravo 🍻

Agm est vraiment génial et pratique mais malheureusement je n'ai pas pu aider concernant le PR, probablement trop compliqué pour moi.

J'ai donc décidé d'implémenter un code personnalisé pour l'API Javascript de Google Maps qui s'est transformé en un nouveau composant Web appelé web-google-maps que j'ai publié aujourd'hui et utilisé en remplacement dans mon projet afin de résoudre le problème.

Encore une fois, Agm est génial et ce composant Web n'offre pas autant de possibilités que cette bibliothèque. Je pensais juste que j'écrirais ces lignes et les mentionnerais au cas où quelqu'un qui serait confronté au problème serait pressé de trouver une solution potentielle, rien d'autre, rien de plus.

Je n'ai aucun problème lors de la construction, mais lorsque je demande une page qui est censée être rendue côté serveur, j'obtiens l'erreur suivante:

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 peut-être essayer une solution rapide: affichez votre carte uniquement côté navigateur, il n'y a pas d'élément window côté serveur (c'est pourquoi il pourrait être construit mais il échoue à l'exécution)

pseudo code:

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

@AnthonyNahas j'ai essayé votre solution mais j'ai toujours la même erreur.
J'essaye de déployer mon paquet de serveur à la fonction de feu de nuage ...

sans agm tout va bien / fonctionne mais avec agm obtenu une erreur -

functions [ssr (us-central1)]: erreur de déploiement.
Erreur de chargement de fonction: le code du fichier index.js ne peut pas être chargé.
Y a-t-il une erreur de syntaxe dans votre code?
Trace de pile détaillée: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(fonction (exporte, require, module, __filename, __dirname)
{import {Injectable, NgZone} depuis '@ angular / core';
^^^^^^

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

Répondez, s'il vous plaît

Cela signifie que le compilateur babel n'a pas fait son travail car il aurait remplacé les importations. Les deux dépôts devraient être disponibles pré-compilés dans mon github. Vous pouvez l'utiliser si vous ne parvenez pas à faire la partie babel.

@AnthonyNa a honnêtement merci pour votre solution, cela fonctionne pour moi avec la dernière version babel et angular 6.

@AnthonyNahas

Tu es un dieu mon ami ...

Plusieurs problèmes empêchent l'utilisation de ce package côté serveur via Angular Universal. J'ai déjà fait un travail similaire sur diverses bibliothèques (par exemple 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), alors j'ai pensé que je jetterais un œil.

En bref, lorsque vous ciblez la plate-forme serveur avec la CLI angulaire, seule l'application elle-même est compilée, car le bundle UMD de la bibliothèque serait alors utilisé lors de son exécution dans NodeJS. Comme l'a souligné @AnthonyNahas , cela signifie que le point d'entrée du package main doit pointer vers ledit bundle UMD, c'est-à-dire quelque chose que NodeJS comprend nativement.

En plus du bundle UMD natif NodeJS, les meilleures pratiques pour les bibliothèques selon les directives du format de package angulaire consistent également à publier des modules ES compatibles avec AoT et des fichiers de métadonnées metadata.json , ce que ce package fait déjà. Cependant, en raison de https://github.com/angular/angular-cli/issues/7200 , la construction Angular Universal échoue actuellement (avec des erreurs de type SyntaxError: Unexpected token export ) lorsque ladite bibliothèque est publiée en tant que modules ES séparés à la place. d'un aplatissement (fesm), car les importations profondes seraient ensuite résolues dans les modules ES, provoquant l'échec de Node car il ne comprend pas les modules ES

Le correctif consiste à utiliser les paramètres angularCompilerOptions de flatModuleOutFile & flatModuleId , selon https://angular.io/guide/aot-compiler , et de transmettre la sortie via Rollup , afin de produire des fichiers de modules et de typages ES plats, puis définissez-les comme points d'entrée module et typings . Étant donné que ces options nécessitent un point d'entrée unique par bibliothèque, j'ai dû diviser les fichiers principaux tsconfig.json afin de prendre en charge js-marker-clusterer & snazzy-info-window .

De plus, les configurations de rollup définissaient context: 'window' , qui se cassait du côté serveur, que je suis revenu au comportement par défaut de Rollup "this as undefined" (qui bien qu'étant un avertissement, est en fait le comportement attendu).

Enfin, maintenant que la version universelle de votre application se compile avec cette bibliothèque, vous devez décider quoi faire au moment de l'exécution / rendre le code lui-même convivial universel, ce que j'ai réalisé en utilisant isPlatformBrowser(this.platformId) dans le chargeur du SDK Google Maps load() fonction pour sauter simplement l'injection. Cela fait l'affaire pour notre cas d'utilisation actuel, mais la plupart des mesures de protection pourraient être nécessaires pour désactiver cette bibliothèque côté serveur (puisque le SDK Google Maps ne fonctionnera pas de toute façon).

Quoi qu'il en soit, le PR est à https://github.com/SebastianM/angular-google-maps/pull/1554 , commentaires bienvenus. J'ai un fork en cours d'exécution sur @ laurentgoudet / agm-core que j'utilise avec succès pour mon projet (jusqu'à ce que ce PR soit fusionné). J'utilise la CLI angulaire mais cela devrait fonctionner avec n'importe quel constructeur - commentaires bienvenus.

Après de nombreux essais, la solution fournie par @AnthonyNa m'a permis de déployer une application universelle en tant que fonction firebase :)
Ma suggestion est de vérifier si les fichiers ts sont effectivement transformés en js, s'ils le sont, l'erreur d'importation / exportation ne doit pas apparaître.

Modifier (26/12/2018)
Je cours à nouveau sur le problème avec le module de fenêtre d'informations élégant. J'ai fini par découvrir que babel ne fonctionnait pas lorsque j'utilisais firebase deploy (rappelez-vous que lors du déploiement de AU en tant que fonction firebase, une installation npm est effectuée, ce qui signifie que le package sera réinstallé en tant que fichiers ts). En fin de compte, je viens de bifurquer la bibliothèque (https://github.com/jota12x/angular-google-maps), d'appliquer babel et de l'installer à partir du dépôt. Problème résolu. (En attendant le correctif dans le dépôt principal cependant).

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Une activité à ce sujet? C'est assez simple à réparer - il suffit de commencer à utiliser @angular-devkit/build-angular . C'est l'un des problèmes les plus graves car les gens ont 2 voies de sortie:
1) Utilisez des configurations Webpack personnalisées
2) Utilisez des hacks

et commencer à utiliser @ angular-devkit / build-angular est assez simple et pourrait économiser des heures de piratage

@AnthonyNahas

_Mise à jour de la solution vers la dernière version de babel_

@philippeboyd @dkmostafa J'ai résolu le même problème récemment pour ce module et d'autres comme -> ngx translate et plus ...

solution (compilez les fichiers js dans es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. ajoutez ceci au projet racine sous le nom .babelrc ou ajoutez les presets directement via cli
   { "presets": ["@babel/preset-env"] }
3. ajouter un script npm dans package.json dans la portée "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. ajouter un script de post-installation dans package.json dans la portée "scrtipsts"
   "postinstall": "npm run compile_@agm_core",
5. exécutez npm i pour installer les deps. Après avoir installé le deps, le script postinstall s'exécutera et babel compilera les fichiers js ciblés
6. exécuter votre serveur et devrait monde
7. Donnez-moi s'il vous plaît des commentaires si cela fonctionne. J'ai fait les mêmes minces pour plus de 3 modules npm cela fonctionne sur ma machine: D

Merci beaucoup, ça marche toujours sur Angular 7

Mais c'est un hack ... Ou une solution de contournement ...

Le mar 2 avril 2019, 12 h 53, PEA [email protected] a écrit:

@AnthonyNahas https://github.com/AnthonyNahas

Mise à jour de la solution vers la dernière version de babel

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa j'ai résolu le même problème récemment pour cela
module et d'autres comme -> ngx translate et plus encore ...

solution (compilez les fichiers js dans es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. ajoutez ceci au projet racine sous le nom .babelrc ou ajoutez le
   préréglages directement via cli
   {"préréglages": ["@ babel / preset-env"]}
3. ajouter un script npm dans package.json dans la portée "scrtipsts"
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. ajouter un script de post-installation dans package.json dans la portée "scrtipsts"
   "postinstall": "npm run compile_ @ agm_core ",
5. exécutez npm i pour installer les deps. Après avoir installé les deps, le
   la post-installation du script s'exécutera et babel compilera les fichiers js ciblés
6. exécuter votre serveur et devrait monde
7. Donnez-moi s'il vous plaît des commentaires si cela fonctionne. J'ai fait les mêmes minces pour plus
   que 3 modules npm cela fonctionne sur ma machine: D

Merci beaucoup, ça marche toujours sur Angular 7

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

J'ai utilisé la solution de @AnthonyNahas mais

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

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 le problème n'est pas directement lié à la bibliothèque ... cela semble être une erreur de compilation ...

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Nous allons bientôt passer à ngc, donc j'espère que cela fonctionnera avec Angular Universal. Personnellement, je n'ai aucune expérience et connaissance dans l'universel et AoT.

Ok, j'ai fait ng-packagr PR, alors peut-être que maintenant ça fonctionnera. Pouvez-vous essayer forking master et voir si cela fonctionne?

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Salut @ doom777
Pouvez-vous me dire quand vous prévoyez de publier cette fusion? J'adorerais déposer ma version corrigée de cette bibliothèque :)

Pas à moi