Angular-google-maps: Angular 4 Universal - SyntaxError: Unerwarteter Token-Export

Hallo, ich musste mich mit diesem Problem befassen, das nicht wirklich ein Agm-Problem ist, sondern ein globales.
Die meisten der neuesten Pakete, einschließlich Agm, sind in es6 mit den Schlüsselwörtern import und export kompiliert.

Dies war vor Universal kein Problem, da die Pakete immer eine Bundle-Datei enthalten, z. B. System.js für lokale Entwickler, und Webpack / Rollup versteht es6 für Produktions-Bundles.

Aber mit Universal verwenden Sie die Dateien in den node_modules direkt in es6, und node kennt noch keine import und export Token.

Zwei Dinge können getan werden: Sie können Ihre App sogar für Universal bündeln, aber Sie verlieren viel Kompilierungszeit für ein Bundle, das in einem Serverkontext unbrauchbar ist.

Eine andere Option, die ich in meinem Unternehmen verwendet habe, besteht darin, alle Ihre Quellen vor dem Kompilieren in einen tmp-Ordner zu kopieren und einen node_modules-Ordner in diesem tmp-Ordner zu erstellen.
Sie können dann den gesamten @ agm- Ordner @agm benötigen,

Das ist super nervig und es gibt momentan keine anderen Optionen (lass es mich wissen, wenn du eine bessere findest). Ich denke wirklich, dass ng2-Module einen Weg finden müssen, sowohl es6- als auch commonjs-Dateien bereitzustellen, wenn sie möchten, dass ihre Module mit universal einfach zu verwenden sind :)

Verwenden Sie webpack.config

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

@kkaabbaa können Sie bestätigen, dass dies funktioniert?
Das einfache Hinzufügen zu meinem Webpack hat den Job nicht erledigt.

Ich habe das gleiche Problem, ich habe Babel und ich habe eine Kopie des Projekts in einem neuen Ordner erstellt und dann Babel lokal installiert, aber ich möchte den Prozess verstehen, den Adrienboulle für seine Firma erstellt, weil ich dies finis bekommen muss Sache danke im Voraus.

Ich habe es zu webpack.config hinzugefügt und es funktioniert nicht für mich.

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

Ich habe es mit einer Problemumgehung arbeiten lassen, indem ich eine Komponente, die meine Agm-Map enthält, dynamisch lade, basierend darauf, ob es sich um den Browser oder den Server handelt: https://angular.io/guide/dynamic-component-loader

Ich habe zu es5 kompiliert, aber auch Fehler angezeigt

Endlich in der Lage, Google Map mit Universal zu verwenden. Ich mache Repo und Video

Ich habe diesen Beitrag verwendet https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angle-cli-db8b53bba07d

und hinzugefügt

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

@kkaabbaa wo hast du bitte hinzugefügt?

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

Immer noch nicht funktioniert, ich habe versucht @kkaabbaa Lösung, aber nicht für mich funktioniert, das gleiche Problem

_Updated die Lösung auf die neueste Version von babel_

@philippeboyd @dkmostafa Ich habe das gleiche Problem kürzlich für dieses Modul gelöst und andere wie -> ngx translate und mehr ...

Lösung (kompilieren Sie die JS-Dateien in es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. Fügen Sie dies dem Stammprojekt unter dem Namen .babelrc oder fügen Sie die Voreinstellungen direkt über cli hinzu
   { "presets": ["@babel/preset-env"] }

3. Fügen Sie ein npm-Skript in package.json im Bereich "scrtipsts" hinzu
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. Fügen Sie ein Postinstall-Skript in package.json im Bereich "scrtipsts" hinzu
   "postinstall": "npm run compile_@agm_core",

5. Führen Sie npm i , um die Deps zu installieren. Nach der Installation der deps wird das Skript postinstall ausgeführt und babel kompiliert die Ziel-js-Dateien

6. Führen Sie Ihren Server und sollte Welt

7. Gib mir bitte Feedback, wenn es funktioniert. Ich habe die gleichen Ausdünnungen für mehr als 3 npm-Module durchgeführt, die auf meinem Computer funktionieren: D.

@AnthonyNahas das ist eine sehr interessante Idee. Es scheint zu schön um wahr zu sein! Ich werde es versuchen

Hat jemand eine Lösung dafür? Dies ist erst kürzlich ebenfalls aufgetreten.

@adrienboulle danke für die Erklärung der Dinge, jetzt frage ich mich:

@AnthonyNahas Ich habe das versucht. Jetzt zeigt es einen weiteren Fehler

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

@AnthonyNahas , vielen Dank für Ihre Lösung! Ich habe mehrere andere Lösungen ausprobiert, die für mich ungefähr einen Monat lang nicht funktionierten! Dies löst tatsächlich mein Problem =)

@karthikeyanmanureva u sollte dasselbe für ein anderes npm-Modul tun, das "SyntaxError: Unerwarteter Token-Import" auslöst ...
@martinreus Prost

@AnthonyNahas das hat bei mir funktioniert, ich weiß nicht, wie du auf diese Lösung gekommen bist, aber danke,

@AnthonyNahas ， Ihre Lösung hat mir geholfen, dieses Problem zu lösen

@AnthonyNahas , danke, für ein Modul hat es funktioniert. Aber jetzt benutze ich ein anderes Paket ng2-slim-load-bar und es wirft einen Fehler aus:

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

Irgendeine Idee, wie ich das beheben kann?

Fügen Sie es dem Ausschlussabschnitt hinzu, und das Webpack versucht es zumindest, um festzustellen, ob es vorhanden ist
funktioniert

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

@AnthonyNahas https://github.com/anthonynahas , danke für ein Modul
es funktionierte. Aber jetzt benutze ich ein anderes Paket ng2-slim-load-bar
https://github.com/akserg/ng2-slim-loading-bar und es wird ein Fehler ausgegeben:

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

Exportieren Sie konstante Stile: any [] = ['.slim-load-bar [_ngcontent-% COMP%] {\ n Position: fest; \ n Rand: 0; \ n Auffüllen: 0; \ n oben: 0; \ n links: 0; \ n rechts: 0; \ n Z-Index: 99999; \ n} \ n \ n \ n.Slim-Ladebalken-Fortschritt [_ngcontent-% COMP%] {\ n Rand: 0; \ n Auffüllen: 0; \ n Z-Index: 99998; \ n Hintergrundfarbe: Grün; \ n Farbe: Grün; \ n Kastenschatten: 0 0 10px 0; \ n Höhe: 2px; \ n Deckkraft: 0; \ n \ n \ n-Webkit-Übergang: alle 0,5 Sekunden Easy-In-Out; \ n -Moz-Übergang: alle 0,5 Sekunden Easy-In-Out; \ n -o-Übergang: alle 0,5 Sekunden Easy-In-Out; \ n Übergang: Alle 0,5 Sekunden Easy-In-Out; \ n} '];
^^^^^^

SyntaxError: Unerwarteter Token-Export

Irgendeine Idee, wie ich das beheben kann?

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo füge ein neues npm-Skript hinzu, um das ng2-slim ... -Modul zu transpilieren
-> Fügen Sie ein npm-Skript in package.json im Bereich "scrtipsts" hinzu
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

dann ->

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

-> danach noch einmal npm i laufen lassen

-> Ergebnis
Das andere Modul sollte ebenfalls transpiliert werden

@AnthonyNahas vielen Dank

@AnthonyNahas , wie ich bereits erwähnte, habe ich bereits ein Skript, das dieses Modul auf 2015

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

Oder ist es wichtig, genau Ihren Weg zu gehen, während postinstall Hook?

@AnthonyNahas , ich habe versucht, bis 2015 während des postinstall -Hakens zu kompilieren, aber der Fehler wird trotzdem angezeigt. Ich denke, dass client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle Datei von Angular generiert, aber ich habe keine Ahnung, wie es funktioniert.

@lomboboo

auf postinstall es nicht wichtig!

Ist dieser Block derselbe, den Sie in Ihrem Projekt verwendet haben?

Ich habe im ersten npm-Skript einen Fehler gefunden: Möglicherweise müssen Sie andere Dateien als diese Dateien im src -> transpilieren

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

sollte (nach) sein ->

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

PS: Wenn Sie ein npm-Skript vom Terminal aus ausführen, können Sie babel anstelle von node_modules/babel-cli/bin/babel.js . Der andere ist nur hilfreich, wenn Sie Ihre Aufgaben sofort vom Terminal aus ausführen und nicht über npm ...

Ich habe gerade dieses Repo gegabelt und werde bald eine bessere Lösung zur Behebung dieser Art von Fehlern wie unerwartetem Token-Export / -Import bereitstellen, damit der Entwickler dieses Modul verwenden kann, ohne die src-Dateien manuell zu transpilieren und ein benutzerdefiniertes npm-Skript auszuführen ..

@AnthonyNahas MVP

@AnthonyNahas , also bin ich zu dieser Lösung gekommen. Ich habe webpack.config.js für den Server erstellt und es folgendermaßen konfiguriert:

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

Sie müssen also webpack und webpack-node-externals lokal installieren. In nodeExternals können Sie Plugins definieren, Pakete, die Sie beim Kompilieren des Servers nicht benötigen. In meinem Fall ist es das ng2-slim-load-bar- Plugin, das den von mir beschriebenen Fehler
Und schließlich fügen Sie einfach webpack zu package.json wenn Sie ein Serverskript ausführen. Mein package.json sieht so aus:

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

Wenn Sie keinen Standardnamen von webpack.config.js , müssen Sie den korrekten Namen als webpack Argument angeben. Beispielsweise,

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

Ich hoffe es wird jemandem helfen. Meiner Meinung nach ist es eine robustere Lösung, mit der das Kompilieren jedes Plugins, mit dem Ihr Server Probleme hat.

@AnthonyNahas Ich stehe vor dem gleichen Problem und habe Ihre Lösung aber ausprobiert
Was ist unter dem Punkt zu tun, den Sie in der Lösung angegeben haben?

• Fügen Sie dies dem Stammprojekt unter dem Namen .babelrc hinzu
  {"Voreinstellungen": ["es2015"]}

@ Harshketu
Erstellen Sie in Ihrem Projekt auf der obersten Ebene (root) -> eine Datei mit dem Namen .babelrc und fügen Sie sie ein
die folgenden -> { "presets": ["es2015"] } <- in dieser Datei

@AnthonyNahas
Funktioniert Ihre Lösung mit der Datei webpack.config oder ohne?

Es hängt davon ab, ob Ihr Projekt ausgeworfen wird .
Das Transpilieren des Codes in es5 hat jedoch keine direkte Abhängigkeit von der Datei webpack.config

Nach @AnthonyNahas seiner Lösung habe ich eine kompilierte Version auf git verschoben, damit man sie direkt in package.json verwenden kann, ohne babel etc installieren zu müssen:

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

Könnte für jeden von Nutzen sein. Ich verwende Firebase Hosting und aus irgendeinem Grund scheint Firebase den Code nicht zu kompilieren, obwohl ich genau dieselbe Methode verwende, wie sie von Anthony in package.json für Firebase beschrieben wurde. Deshalb verwende ich diese Problemumgehung.

@cmddavid Ich bin auch auf Firebase auf dieses Problem

@dockleryxk Bedeutet dies, dass meine Lösung die einzige praktikable Lösung ist, wenn Firebase verwendet wird?

Ich verstehe nicht ganz, warum Firebase alle Module erneut installiert. Ist das Server-Bundle, das vor der Bereitstellung auf dem Client generiert wird, nicht ausreichend? Soweit ich das beurteilen kann, erfordert das von der Firebase-Funktion ausgeführte Knotenskript nur einen sehr begrenzten Satz von Knotenpaketen. Mit Sicherheit nicht das @agm/core -Paket. Da das Server-Bundle bereits während der Bereitstellung an den Server gesendet wird.

@cmddavid Das Hochladen eines Knotenmodulverzeichnisses kann möglicherweise lange dauern. Ich vermute, warum, aber ich weiß es nicht genau. Persönlich habe ich die kompilierten Module in ein Verzeichnis innerhalb des Funktionsverzeichnisses gestellt und verweise einfach aus der package.json im Funktionsverzeichnis darauf. Zum Beispiel "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas hat meinen Tag gerettet. Ich hatte seit Wochen Probleme, dieses Angular Universal Server Side-Rendering zum Laufen zu bringen. Ihre Lösung hat wie ein Zauber funktioniert !!

@AnthonyNahas , vielen @ agm- Dateien geöffnet

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], hat den Job für mich gemacht. Vielen Dank. Andernfalls sollte die @ AnthonyNahas- Lösung den Job erledigen.

Ich hatte das gleiche Problem mit einem meiner eigenen Pakete, und es stellte sich heraus, dass das Paket "Angular Package Format" kompatibel war. Dies ist ein sehr nützliches npm-Paket, um dabei zu helfen: https://github.com/dherges/ng-packagr

Es ist ziemlich Plug and Play.

@AnthonyNahas. Das funktioniert auch bei mir.
Vielen Dank

Habt ihr noch Probleme damit? Ich verwende dieses Modul in einem Universal-Projekt und es ist eine sofort einsatzbereite Arbeitsdatei. Welche Versionen verwenden Sie?

Hallo @AnthonyNahas , ich kann nicht scheinen, dass dies für ng2-google-place-autocomplete funktioniert

Ich erhalte diese Fehlermeldung:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
export * from './src/index';
^^^^^^

SyntaxError: Unerwarteter Token-Export
bei createScript (vm.js: 80: 10)
at Object.runInThisContext (vm.js: 139: 10)
at Module._compile (module.js: 599: 28)
at Module._extensions..js (module.js: 646: 10)
at Object.require.extensions. (anonyme Funktion) [als .ts] (C: \ Users \ Andrenode_modulests-node \ srcindex.ts: 392: 14)
bei Module.load (module.js: 554: 32)
bei tryModuleLoad (module.js: 497: 12)
at Function.Module._load (module.js: 489: 3)
at Module.require (module.js: 579: 17)
at require (internal / module.js: 11: 18) `

Ich bin dann deinen Schritten gefolgt:

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

2. Fügen Sie dies dem Stammprojekt unter dem Namen .babelrc hinzu
   {"Voreinstellungen": ["es2015"]}

3. Fügen Sie dieses Skript meiner Datei package.json hinzu

"Skripte": {
"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. Führen Sie npm i aus, um die Deps zu installieren. Nach der Installation der deps wird das Skript postinstall ausgeführt und babel kompiliert die Ziel-js-Dateien

2. Führen Sie npm run start aus

3. Ich bekomme immer noch den Fehler den gleichen Fehler.

Wenn Sie mir helfen könnten, wäre das wirklich eine große Hilfe, da ich stundenlang versucht habe, dies zu beheben!

@dockleryxk , @AnthonyNahas , @cmddavid ist ein einfacher und einfacher Weg ...
Garn hinzufügen agm-kompiliert. Ohne Webpack und sytemjs nonsens arbeiten Sie eckig5 ^ + universal + ssr + firebase Hosting / Funktionen.

@retrwood , das ist großartig, wäre aber schön, wenn auch eine NPM-Version verfügbar wäre.

Danke @AnthonyNahas ,
Sie haben meinen Tag gerettet, es ist wirklich eine großartige Arbeit, da ich mit dem Auswerfen des Cli-Tools nicht einverstanden war.

Ich danke dir sehr.

@AnthonyNahas babel-preset-es2015 ist jetzt veraltet. Wie können wir mit diesem Problem umgehen?

@Gomathipriya danke für die Nachfrage! Sie haben mir die Motivation gegeben, endlich eine Pull-Anfrage zu senden!

21.9.2017 , ich habe eine Lösung veröffentlicht, um diesen Fehler zu beheben! Zu diesem Zeitpunkt wusste ich nicht, dass die Bibliothek den Schreibcode wie Bundle, es5, generiert. Ich hatte zu viele Projekte und konnte nicht herausfinden, was mit @ agm / core wirklich falsch @ agm / core verwenden, und ich hatte das gleiche Problem, als ich mit jest getestet habe. Also habe ich beschlossen, mir dieses Projekt genauer anzusehen und fand etwas Interessantes.

Eigentlich müssen wir den Code nicht mehr in es5 transpilieren, da der Build dieses Projekts dies bereits für uns getan hat. Aber Typoskript weiß nichts über sie! Einige Informationen fehlen in package.json .

Tipp, um das zu lösen:

1. gehe zu cd node_modules
2. cd \@agm/core
3. öffne die package.json
4. und fügen Sie Folgendes hinzu

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

und der Fehler sollte behoben sein! Beim Kompilieren wählt Typoskript nun den richtigen JS-Code aus!

Ich habe vor ein paar Sekunden eine Pull-Anfrage gesendet!

Bitte unterstützen Sie diese PR, nachdem Sie sie auf Ihrem Computer getestet haben!

Ich teste das folgende Szenario hier in diesem Projekt @ angle-material-extensions / google-maps-autocomplete

Wenn du ein Projekt magst, unterstütze mich bitte, indem du die Hauptrolle spielst und teilst!

Vielen Dank an alle 👍 ❤️

Irgendwelche Neuigkeiten ? @SebastianM

@ Bastienlemaitre Ich werde meine PR anpassen

Schauen Sie hier:

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

Sagen Sie, ob der Trick es für Sie getan hat!

@AnthonyNahas wir sehen das gleiche Problem auch mit dem Map Clusterer-Paket. Super frustrierend, ich weiß es zu schätzen, dass Sie sich die Zeit genommen haben, daran zu arbeiten. Gibt es eine vorgeschlagene Lösung, die ich implementieren könnte, während die PR überprüft wird?

Ich kann dies manuell hinzufügen, damit unsere Tests bestanden werden, aber es wird immer noch in der Pipeline fehlschlagen.

@Gomathipriya Ich habe gerade die oben veröffentlichte Lösung auf die neueste Version von babel v7.1.0 aktualisiert und den Prozess in meiner eigenen npm mobule @ angle

Überprüfen Sie hier den Circleci-Status

Travis-CI-Status hier

@mcblum sollten Sie wahrscheinlich das gleiche wie das Kernmodul (siehe die oben veröffentlichte Lösung)

Prost 🍻

Agm ist wirklich großartig und praktisch, aber leider konnte ich in Bezug auf die PR nicht helfen, wahrscheinlich zu kompliziert für mich.

Daher habe ich beschlossen, einen benutzerdefinierten Code für die Javascript-API von Google Maps zu implementieren, aus dem eine neue Webkomponente namens

Auch hier ist Agm großartig und diese Webkomponente bietet nicht so viele Möglichkeiten wie diese Bibliothek. Ich dachte nur, ich würde diese Zeilen schreiben und sie erwähnen, falls jemand, der mit dem Problem konfrontiert ist, in Eile nach einer möglichen Lösung suchen würde, sonst nichts, nichts weiter.

Ich habe keine Probleme beim Erstellen, aber wenn ich eine Seite anfordere, die serverseitig gerendert werden soll, erhalte ich die folgende Fehlermeldung:

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 versuchen window -Element auf der Serverseite (deshalb könnte sie erstellt werden, schlägt aber zur Laufzeit fehl)

Pseudocode:

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

@AnthonyNahas Ich habe Ihre Lösung ausprobiert, aber immer noch den gleichen Fehler erhalten.
Ich versuche, mein Server-Bundle bei der Cloud-Fire-Funktion bereitzustellen ...

ohne agm ist alles ok / funktioniert aber mit agm habe fehler--

Funktionen [ssr (us-central1)]: Bereitstellungsfehler.
Fehler beim Laden der Funktion: Code in der Datei index.js kann nicht geladen werden.
Gibt es einen Syntaxfehler in Ihrem Code?
Detaillierte Stapelverfolgung: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(Funktion (exportiert, erfordert, Modul, __Dateiname, __Dirnname)
{import {Injectable, NgZone} from '@ angle / core';
^^^^^^

SyntaxError: Unerwarteter Token-Import
bei createScript (vm.js: 56: 10)
at Object.runInThisContext (vm.js: 97: 10)
at Module._compile (module.js: 549: 28)
at Object.Module._extensions..js (module.js: 586: 10)
bei Module.load (module.js: 494: 32)
bei tryModuleLoad (module.js: 453: 12)
bei Function.Module._load (module.js: 445: 3)
at Module.require (module.js: 504: 17)
bei Bedarf (intern / module.js: 20: 19)
unter Object. @ agm / core / services / manager / circle-manager (/user_code/dist/server/main.js:4999:18)

antworten Sie bitte

Das bedeutet, dass der Babel-Compiler seine Arbeit nicht erledigt hat, da er die Importe ersetzt hätte. Beide Repos sollten in meinem Github vorkompiliert verfügbar sein. Sie können dies verwenden, wenn Sie den Babel-Teil nicht ausführen können.

@AnthonyNahas ehrlich danke für deine Lösung, es funktioniert für mich mit der neuesten Version Babel und Angular 6.

@AnthonyNahas

Du bist ein Gott, mein Freund ...

Es gibt mehrere Probleme, die verhindern, dass dieses Paket über Angular Universal serverseitig verwendet wird. Ich habe bereits ähnliche Arbeiten an verschiedenen Bibliotheken durchgeführt (z. B. 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), also dachte ich, ich würde einen Blick darauf werfen.

Kurz gesagt, wenn auf die Serverplattform mit der Angular-CLI abgezielt wird, wird nur die App selbst kompiliert, da das UMD-Paket der Bibliothek dann verwendet wird, wenn es in NodeJS ausgeführt wird. Wie von @AnthonyNahas hervorgehoben , bedeutet dies, dass der Einstiegspunkt main Paket

Zusätzlich zum NodeJS-nativen UMD-Bundle besteht die beste Vorgehensweise für Bibliotheken gemäß den Richtlinien für das Angular Package Format darin, auch AoT-freundliche ES-Module und metadata.json Metadatendateien zu veröffentlichen, was dieses Paket bereits tut. Aufgrund von https://github.com/angular/angular-cli/issues/7200 schlägt der Angular Universal-Build derzeit jedoch fehl (mit SyntaxError: Unexpected token export -ähnlichen Fehlern), wenn diese Bibliothek stattdessen als separate ES-Module veröffentlicht wird von einem flachen (fesm), da die tiefen Importe dann in die ES-Module aufgelöst würden, was dazu führen würde, dass der Knoten ausfällt, da er die ES-Module nicht versteht

Die Lösung besteht darin, die Parameter angularCompilerOptions flatModuleOutFile & flatModuleId gemäß https://angular.io/guide/aot-compiler zu verwenden und die Ausgabe über Rollup weiterzuleiten , um flache ES-Modul- und Typisierungsdateien zu erstellen, und legen Sie diese dann als Einstiegspunkte module und typings . Da für diese Optionen ein eindeutiger Einstiegspunkt pro Bibliothek erforderlich ist, musste ich die Hauptdateien tsconfig.json aufteilen, um js-marker-clusterer & snazzy-info-window .

Außerdem haben die Rollup-Konfigurationen context: 'window' , was auf der Serverseite unterbrochen wird. Ich habe auf Rollups Standardverhalten "Dies als undefiniert" zurückgeschaltet (was zwar eine Warnung ist, aber tatsächlich das erwartete Verhalten ist).

Nachdem Ihr App Universal Build mit dieser Bibliothek kompiliert wurde, müssen Sie entscheiden, was zur Laufzeit getan werden soll, und den Code selbst universell machen. Dies habe ich mit isPlatformBrowser(this.platformId) im Google Maps SDK-Loader load() Funktion zum Überspringen der Injektion. Dies ist der Trick für unseren aktuellen Anwendungsfall, aber die meisten Sicherheitsvorkehrungen könnten erforderlich sein, um diese Bibliothek auf der Serverseite zu deaktivieren (da das Google Maps SDK dort sowieso nicht ausgeführt wird).

Wie auch immer, die PR ist unter https://github.com/SebastianM/angular-google-maps/pull/1554 , Kommentare willkommen. Unter @ laurentgoudet / agm-core läuft eine Gabelung, die ich erfolgreich für mein Projekt verwende (bis diese PR zusammengeführt wird). Ich verwende die Angular-CLI, aber sie sollte mit jedem Builder funktionieren - Feedback ist willkommen.

Nach vielen Versuchen konnte ich mit der von @AnthonyNahas bereitgestellten Lösung eine universelle App als Firebase-Funktion bereitstellen :).
Mein Vorschlag ist zu überprüfen, ob die ts-Dateien effektiv in js umgewandelt werden. Wenn dies der Fall ist, darf der Fehler beim Importieren / Exportieren nicht auftreten.

Bearbeiten (26/12/2018)
Ich laufe wieder auf das Problem mit dem pfiffigen Info-Fenstermodul. Am Ende stellte ich fest, dass babel bei der Verwendung von firebase deploy nicht ausgeführt wurde (Denken Sie daran, dass bei der Bereitstellung von AU als Firebase-Funktion eine npm-Installation durchgeführt wird, was bedeutet, dass das Paket erneut als ts-Dateien installiert wird). Am Ende habe ich nur die Bibliothek gegabelt (https://github.com/jota12x/angular-google-maps), babel angewendet und sie aus dem Repo installiert. Problem gelöst. (Warten auf das Update im Haupt-Repo).

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Irgendwelche Aktivitäten dazu? Es ist ganz einfach zu beheben - Sie müssen nur @angular-devkit/build-angular . Dies ist eines der schwerwiegendsten Probleme, da die Menschen zwei Auswege haben:
1) Verwenden Sie benutzerdefinierte Webpack-Konfigurationen
2) Verwenden Sie einige Hacks

Das Starten von use @ angle-devkit / build-angular ist recht einfach und kann stundenlanges Hacken ersparen

@AnthonyNahas

_Updated die Lösung auf die neueste Version von babel_

@philippeboyd @dkmostafa Ich habe das gleiche Problem kürzlich für dieses Modul gelöst und andere wie -> ngx translate und mehr ...

Lösung (kompilieren Sie die JS-Dateien in es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. Fügen Sie dies dem Stammprojekt unter dem Namen .babelrc oder fügen Sie die Voreinstellungen direkt über cli hinzu
   { "presets": ["@babel/preset-env"] }
3. Fügen Sie ein npm-Skript in package.json im Bereich "scrtipsts" hinzu
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. Fügen Sie ein Postinstall-Skript in package.json im Bereich "scrtipsts" hinzu
   "postinstall": "npm run compile_@agm_core",
5. Führen Sie npm i , um die Deps zu installieren. Nach der Installation der deps wird das Skript postinstall ausgeführt und babel kompiliert die Ziel-js-Dateien
6. Führen Sie Ihren Server und sollte Welt
7. Gib mir bitte Feedback, wenn es funktioniert. Ich habe die gleichen Ausdünnungen für mehr als 3 npm-Module durchgeführt, die auf meinem Computer funktionieren: D.

Vielen Dank, es funktioniert immer noch mit Angular 7

Aber das ist ein Hack ... oder eine Problemumgehung ...

Am Dienstag, den 2. April 2019 um 12:53 Uhr schrieb PEA [email protected] :

@AnthonyNahas https://github.com/AnthonyNahas

Die Lösung wurde auf die neueste Version von babel aktualisiert

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa Ich habe das gleiche Problem kürzlich dafür gelöst
Modul und andere wie -> ngx übersetzen und mehr ...

Lösung (kompilieren Sie die JS-Dateien in es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. Fügen Sie dies dem Stammprojekt unter dem Namen .babelrc hinzu oder fügen Sie das hinzu
   Presets direkt über cli
   {"presets": ["@ babel / preset-env"]}
3. Fügen Sie ein npm-Skript in package.json im Bereich "scrtipsts" hinzu
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. Fügen Sie ein Postinstall-Skript in package.json im Bereich "scrtipsts" hinzu
   "postinstall": "npm run compile_ @ agm_core ",
5. Führen Sie npm i aus, um die Deps zu installieren. Nach der Installation der Deps wird die
   Die Nachinstallation des Skripts wird ausgeführt und babel kompiliert die Ziel-JS-Dateien
6. Führen Sie Ihren Server und sollte Welt
7. Gib mir bitte Feedback, wenn es funktioniert. Ich habe das Gleiche für mehr getan
   als 3 npm Module funktioniert es auf meinem Computer: D.

Vielen Dank, es funktioniert immer noch mit Angular 7

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

Ich habe die Lösung von @AnthonyNahas verwendet ,

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

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 das Problem hängt nicht direkt mit der Bibliothek zusammen ... es scheint ein Kompilierungsfehler zu sein ...

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Wir werden bald zu ngc wechseln, also wird es hoffentlich mit Angular Universal funktionieren. Persönlich habe ich 0 Erfahrung und Wissen in Universal und AoT.

Ok, ich habe ng-packagr PR eingezogen, also funktioniert es jetzt vielleicht. Können Sie versuchen, den Meister zu gabeln und zu sehen, ob es funktioniert?

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Hi @ doom777
Können Sie mir bitte sagen, wann Sie diese Zusammenführung veröffentlichen möchten? Ich würde gerne meine gepatchte Version dieser Bibliothek löschen :)

Nicht an mir