Angular-google-maps: Angular 4 Universal - SyntaxError: Ekspor token tak terduga

Halo, saya harus berurusan dengan masalah ini yang sebenarnya bukan masalah Agm tetapi masalah global.
Sebagian besar paket terbaru, termasuk Agm dibuat dalam es6, dengan import dan export kata kunci.

Ini bukan masalah sebelum Universal karena selalu ada file bundel dalam paket untuk katakanlah System.js untuk dev lokal dan Webpack / Rollup akan memahami es6 untuk bundel produksi.

Tapi dengan Universal, Anda langsung menggunakan file di node_modules, di es6 lalu, dan node belum tahu tentang import dan export token.

Dua hal dapat dilakukan, Anda dapat memaketkan aplikasi Anda bahkan untuk universal, tetapi Anda akan kehilangan banyak waktu kompilasi hanya untuk bundel yang tidak berguna dalam konteks server.

Opsi lain, yang saya gunakan di perusahaan saya, adalah menyalin semua sumber Anda di folder tmp sebelum mengkompilasi dan membuat folder node_modules di folder tmp ini.
Anda kemudian dapat menyalin semua folder @agm (yang ada di folder node_module "asli" di folder "palsu" di tmp. Anda kemudian dapat menggunakan babel untuk mengubah file es6 yang disalin di folder node_modules palsu di commonjs yang nodejs akan mengerti. (ketika Anda membutuhkan @agm node akan mencari file di folder node_modules palsu)

Ini sangat menjengkelkan dan sebenarnya tidak ada pilihan lain untuk saat ini (beri tahu saya jika Anda menemukan yang lebih baik). Saya benar-benar berpikir modul ng2 harus menemukan cara untuk menyediakan file es6 dan commonjs jika mereka ingin modul mereka mudah digunakan dengan universal :)

Gunakan webpack.config

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

@ kkaabbaa dapatkah Anda mengonfirmasi bahwa ini berfungsi?
Cukup menambahkannya ke webpack saya tidak menyelesaikan pekerjaan.

saya memiliki masalah yang sama, saya memiliki babel dan saya membuat salinan proyek di folder baru kemudian memiliki babel yang diinstal secara lokal tetapi saya ingin memahami proses yang dia buat untuk perusahaannya karena saya harus menyelesaikan ini hal terima kasih sebelumnya.

saya telah menambahkannya ke webpack.config dan tidak berfungsi untuk saya.

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

Saya memilikinya bekerja dengan solusi dengan secara dinamis memuat komponen yang berisi peta-agm saya berdasarkan apakah itu browser atau server: https://angular.io/guide/dynamic-component-loader

Saya telah mengkompilasi ke es5 tetapi juga menunjukkan kesalahan

Akhirnya bisa menggunakan google map dengan universal. Saya membuat repo dan video

Saya menggunakan posting ini https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angular-cli-db8b53bba07d

dan ditambahkan

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

@kkaabbaa di mana Anda menambahkan, please?

Webpack.config.js saya
https://gist.github.com/kkaabbaa/a308b218938ae55357f73c162e887bd5

Masih tidak berfungsi, saya mencoba solusi @kkaabbaa , tetapi tidak berhasil untuk saya, masalah yang sama

_Memperbarui solusi ke versi terbaru babel_

@philippeboyd @dkmostafa Saya menyelesaikan masalah yang sama baru-baru ini untuk modul ini dan lainnya seperti -> ngx translate dan banyak lagi ...

solusi (kompilasi file js menjadi es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. tambahkan ini ke proyek root dengan nama .babelrc atau tambahkan preset langsung melalui cli
   { "presets": ["@babel/preset-env"] }

3. tambahkan skrip npm di package.json di lingkup "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. tambahkan skrip postinstall di package.json dalam lingkup "scrtipsts"
   "postinstall": "npm run compile_@agm_core",

5. jalankan npm i untuk menginstal deps. Setelah menginstal deps, skrip postinstall akan berjalan dan babel akan mengkompilasi file js yang ditargetkan

6. menjalankan server Anda dan harus dunia

7. Tolong beri saya umpan balik jika berhasil. Saya melakukan hal yang sama untuk lebih dari 3 modul npm yang berfungsi di mesin saya: D

@AnthonyNahas itu ide yang sangat menarik. Sepertinya terlalu bagus untuk menjadi kenyataan! Saya akan mencobanya

Ada yang punya solusi untuk ini? Baru-baru ini menemukan ini juga.

@adrienboulle terima kasih telah menjelaskan banyak hal, sekarang saya bertanya-tanya: bukankah lebih baik merilis paket dalam format berbeda yang juga cocok untuk Angular Universal? Dengan begitu semua solusi yang beredar di sini tidak diperlukan lagi. Atau mungkinkah Angular Universal memahami kode ES6?

@AnthonyNahas saya mencobanya. Sekarang ini menunjukkan kesalahan lain

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

@AnthonyNahas , terima kasih banyak atas solusinya! Saya mencoba beberapa solusi lain yang tidak berhasil untuk saya selama kurang lebih satu bulan! Ini benar-benar menyelesaikan masalah saya =)

@karthikeyanmanureva u harus melakukan hal yang sama untuk modul npm lainnya yang menampilkan "SyntaxError: Unexpected token import" ...
@martinus cheers

@AnthonyNahas ini berhasil untuk saya, saya tidak tahu bagaimana Anda menemukan solusi itu tetapi terima kasih,

@AnthonyNahas , solusi Anda telah membantu saya mengatasi masalah ini

@AnthonyNahas , terima kasih, untuk satu modul yang berhasil. Tapi sekarang saya menggunakan paket lain ng2-slim-loading-bar dan muncul kesalahan:

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

Tahu bagaimana cara memperbaikinya?

tambahkan ke bagian pengecualian dan webpack setidaknya coba untuk melihat apakah itu
bekerja

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

@AnthonyNahas https://github.com/anthonynahas , terima kasih, untuk satu modul
itu berhasil. Tapi sekarang saya menggunakan paket lain ng2-slim-loading-bar
https://github.com/akserg/ng2-slim-loading-bar dan itu melempar kesalahan:

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

ekspor gaya const
^^^^^^

SyntaxError: Ekspor token tak terduga

Tahu bagaimana cara memperbaikinya?

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo tambahkan skrip npm baru untuk mentranspilasi modul ng2-slim ...
-> tambahkan skrip npm di package.json dalam lingkup "scrtipsts"
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

lalu ->

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

-> setelah itu jalankan npm i sekali lagi

-> hasil
modul lainnya juga harus ditranspilasi

@AnonyTerimakasih banyak

@AnthonyNahas , seperti yang saya sebutkan, saya sudah memiliki skrip yang mentransformasikan modul ini hingga 2015. Saya memiliki cara yang sedikit berbeda, tetapi idenya sama. Jadi saya punya:

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

Atau penting untuk melakukan persis seperti Anda, selama postinstall hook?

@Anthony , saya sudah mencoba mengkompilasi ke 2015 selama postinstall hook, tetapi kesalahan tetap muncul. Saya pikir file client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle dihasilkan oleh Angular, tetapi saya tidak tahu bagaimana membuatnya bekerja.

@lob

di postinstall itu tidak penting!

Apakah blok itu sama dengan yang Anda gunakan dalam proyek Anda?

Saya menemukan bug di skrip npm pertama: Anda mungkin perlu mentranspilasi file lain selain file ini di src ->

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

harus (setelah) ->

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

NB: jika Anda menjalankan skrip npm dari terminal, Anda dapat menggunakan babel alih-alih node_modules/babel-cli/bin/babel.js . Yang lainnya hanya membantu ketika Anda menjalankan tugas Anda langsung dari terminal dan bukan melalui npm ...

Saya baru saja membuat fork repo ini dan saya akan segera memberikan solusi yang lebih baik untuk menyelesaikan kesalahan semacam ini, seperti ekspor / impor token yang tidak terduga ... sehingga pengembang dapat menggunakan modul ini tanpa transparansi secara manual file src dan menjalankan skrip npm kustom ..

@AnonyMakassar

@AnthonyNahas , jadi saya berakhir dengan solusi ini. Saya membuat webpack.config.js , yang untuk server dan mengkonfigurasinya seperti ini:

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

Jadi, Anda perlu menginstal webpack dan webpack-node-externals secara lokal. Di dalam nodeExternals Anda dapat menentukan plugin, paket yang tidak Anda perlukan saat server dikompilasi. Dalam kasus saya itu adalah plugin ng2-slim-loading-bar yang memunculkan kesalahan yang saya jelaskan.
Dan terakhir tambahkan saja webpack ke package.json saat Anda menjalankan skrip server. package.json terlihat seperti ini:

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

Jika Anda tidak memiliki nama standar webpack.config.js Anda perlu menentukan nama yang benar sebagai webpack argumen. Sebagai contoh,

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

Saya berharap ini akan membantu seseorang. Menurut pendapat saya, ini adalah solusi yang lebih kuat yang mengkompilasi setiap plugin yang bermasalah dengan server Anda.

@AnthonyNahas saya menghadapi masalah yang sama dan mencoba solusi Anda tetapi
Apa yang harus dilakukan untuk poin di bawah yang Anda berikan dalam solusi

• tambahkan ini ke proyek root dengan nama .babelrc
  {"preset": ["es2015"]}

@Bayu_joo
dalam proyek Anda, di tingkat atas (root) -> buat file dengan nama .babelrc dan tempel
berikut -> { "presets": ["es2015"] } <- dalam file itu

@AnonyNahas
apakah solusi Anda berfungsi dengan file webpack.config atau tanpa?

itu tergantung apakah proyek Anda dikeluarkan .
Namun, mentranspilasi kode ke es5 tidak memiliki ketergantungan langsung ke file webpack.config

Mengikuti @AnthonyNahas solusinya, saya mendorong versi yang dikompilasi ke git sehingga seseorang dapat langsung menggunakannya di package.json tanpa harus menginstal babel dll:

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

Mungkin berguna bagi siapa saja. Saya menggunakan Firebase Hosting, dan untuk beberapa alasan Firebase tampaknya tidak mengompilasi kode meskipun saya menggunakan metode yang persis sama seperti yang dijelaskan oleh Anthony di package.json untuk Firebase. Jadi itulah mengapa saya menggunakan solusi ini.

@cmddavid Saya mengalami masalah ini di firebase juga. Ini tidak akan berfungsi di firebase karena menginstal modul node lagi dan tidak menginstal babel-cli secara global.

@dockleryxk jadi apakah ini berarti solusi saya adalah satu-satunya solusi yang bisa diterapkan saat menggunakan Firebase?

Saya tidak sepenuhnya mengerti mengapa Firebase menginstal semua modul lagi. Bukankah bundel server yang dibuat di klien sebelum penerapan cukup? Sejauh yang saya tahu, skrip node yang dijalankan oleh Fungsi Firebase hanya membutuhkan sekumpulan paket node yang sangat terbatas. Yang pasti bukan paket @agm/core . Karena bundel server sudah dikirim ke server selama penyebaran.

@cmddavid Ini berpotensi memakan waktu lama untuk mengunggah direktori modul node akan menjadi tebakan saya mengapa, tetapi saya sebenarnya tidak tahu. Secara pribadi, saya meletakkan modul yang dikompilasi dalam direktori di dalam direktori fungsi dan hanya mereferensikannya dari package.json di direktori fungsi. Misalnya "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas menyelamatkan hariku. Sedang berjuang untuk mendapatkan rendering Sisi Server Universal Angular ini dan berjalan selama berminggu-minggu sekarang. Solusi Anda bekerja dengan sangat baik !!

@AnthonyNahas , Terima kasih banyak, berfungsi dengan baik untuk saya, ketika saya telah membuka file @agm , setelah melihat sintaks ES6, pikiran pertama pergi untuk kompilasi menggunakan webpack yang merupakan salah satu tought (setidaknya untuk saya), lagi pula terima kasih lagi, sudah siap Angular Universl SSR dan baik-baik saja sekarang!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], melakukan pekerjaan itu untuk saya. Terima kasih. Jika tidak, solusi @AnthonyNahas harus melakukan pekerjaan itu.

Saya memiliki masalah yang sama dengan salah satu paket saya sendiri, dan ternyata membuat paket "Angular Package Format" yang kompatibel berhasil. Ini adalah paket npm yang sangat berguna untuk membantunya: https://github.com/dherges/ng-packagr

Cukup banyak plug and play.

@AnonyNahas. Ini juga berhasil untuk saya.
Terima kasih

Apakah kalian masih bermasalah dengan ini? Saya menggunakan modul ini dalam proyek Universal dan semuanya bekerja di luar kotak. Versi apa yang Anda gunakan?

Hai @AnthonyNahas , sepertinya saya tidak bisa membuat ini berfungsi untuk ng2-google-place-autocomplete

Saya mendapatkan pesan kesalahan ini:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
ekspor * dari './src/index';
^^^^^^

SyntaxError: Ekspor token tak terduga
di createScript (vm.js: 80: 10)
di Object.runInThisContext (vm.js: 139: 10)
di Module._compile (module.js: 599: 28)
di Module._extensions..js (module.js: 646: 10)
di Object.require.extensions. (fungsi anonim) [sebagai .ts] (C: \ Users \ Andrenode_modulests-node \ srcindex.ts: 392: 14)
di Module.load (module.js: 554: 32)
di tryModuleLoad (module.js: 497: 12)
di Function.Module._load (module.js: 489: 3)
di Module.require (module.js: 579: 17)
di membutuhkan (internal / module.js: 11: 18) `

Saya kemudian mengikuti langkah Anda:

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

2. tambahkan ini ke proyek root dengan nama .babelrc
   {"preset": ["es2015"]}

3. tambahkan skrip ini ke file package.json saya

"skrip": {
"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",
"mulai": "ts-node src / server.ts",
"postinstall": "npm run compile_ng2-google-place-autocomplete"
}

1. jalankan npm i untuk menginstal deps. Setelah menginstal deps, skrip postinstall akan berjalan dan babel akan mengkompilasi file js yang ditargetkan

2. Jalankan npm run start

3. Saya masih mendapatkan kesalahan kesalahan yang sama.

Jika Anda dapat membantu saya, itu akan sangat membantu karena saya telah menghabiskan waktu berjam-jam untuk memperbaikinya!

@dockleryxk, @AnthonyNahas, @cmddavid adalah cara sederhana, dan mudah ...
benang tambahkan agm-compiled. Tanpa webpack dan sytemjs nonsens, work angular5 ^ + universal + ssr + firebase hosting / functions.

@retrwood itu bagus, alangkah baiknya jika versi NPM tersedia juga.

Terima kasih @AnthonyNahas ,
Anda menyelamatkan hari saya, ini benar-benar pekerjaan yang hebat, karena saya tidak setuju dengan mengeluarkan alat cli.

Terima kasih banyak.

@AnthonyNahas babel-preset-es2015 tidak digunakan lagi sekarang. Bagaimana kita menangani masalah ini?

@Gomathipriya terima kasih sudah bertanya! Anda memberi saya motivasi untuk akhirnya mengirim permintaan tarik!

21.9.2017 , saya menerbitkan solusi untuk menangani bug ini! Pada saat itu, saya tidak tahu bahwa perpustakaan menghasilkan kode tulis seperti bundle, es5 ... Saya memiliki terlalu banyak proyek dan saya tidak dapat menemukan apa yang salah dengan @ agm / core ! Nah, kemarin saya mengembangkan ekstensi material sudut untuk aplikasi sudut yang menggunakan @ agm / core dan saya menghadapi masalah yang sama saat menguji dengan jest . Jadi saya memutuskan untuk melihat lebih jauh ke proyek ini dan saya menemukan sesuatu yang menarik.

Sebenarnya, kami tidak perlu lagi mentranspilasi kode ke es5 karena pembangunan proyek ini sudah melakukannya untuk kami. Tapi naskah tidak tahu tentang mereka! Beberapa informasi terlewat di package.json .

Jadi tip untuk mengatasinya:

1. pergi ke cd node_modules
2. cd \@agm/core
3. buka package.json
4. dan tambahkan yang berikut ini

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

dan bug harus diselesaikan! Sekarang saat menyusun, skrip ketikan akan memilih kode js yang tepat!

Saya mengirim beberapa detik yang lalu permintaan tarik!

Harap dukung PR ini setelah mengujinya di mesin Anda!

Saya mengujinya dengan skenario berikut di sini, di proyek ini @ angular-material-extensions / google-maps-autocomplete

jika Anda menyukai proyek, dukung saya dengan membintangi dan membagikannya!

Terima kasih semuanya 👍 ❤️

Ada berita ? @Sebastian

@bastienlemaitre Saya akan menyesuaikan PR saya

lihat di sini:

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

beri tahu apakah trik tersebut berhasil untuk Anda!

@AnthonyNahas kami juga melihat masalah yang sama dengan paket clusterer peta. Sangat membuat frustrasi, saya menghargai waktu Anda untuk memperbaikinya. Apakah ada solusi yang diusulkan yang dapat saya terapkan saat PR sedang ditinjau?

Saya dapat menambahkan ini secara manual agar pengujian kami berhasil, tetapi masih akan gagal dalam proses pipeline.

@Gomathipriya Saya baru saja memperbarui solusi yang diposting di atas ke versi terbaru babel v7.1.0, dan saya menguji prosesnya di npm mobule saya sendiri @ angular-material-extensions / google-maps-autocomplete

periksa status lingkaran di sini

status travis-ci di sini

@mcblum Anda mungkin harus hal yang sama seperti modul inti (lihat solusi yang diposting di atas)

tepuk tangan 🍻

Agm benar-benar luar biasa dan praktis, tetapi sayangnya saya tidak dapat membantu terkait PR, mungkin terlalu rumit untuk saya.

Jadi saya memutuskan untuk menerapkan kode khusus untuk Google Maps Javascript API yang berubah menjadi Komponen Web baru yang disebut web-google-maps yang saya terbitkan hari ini dan digunakan sebagai pengganti dalam proyek saya untuk memecahkan masalah tersebut.

Sekali lagi, Agm luar biasa dan Komponen Web ini tidak menawarkan banyak kemungkinan seperti yang ditawarkan pustaka ini. Saya hanya berpikir saya akan menulis baris ini dan menyebutkannya jika seseorang yang menghadapi masalah akan terburu-buru mencari solusi potensial, tidak lebih tidak lebih.

Saya tidak memiliki masalah apa pun saat membangun tetapi ketika meminta halaman yang seharusnya dirender di sisi server, saya mendapatkan kesalahan berikut:

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 mungkin mencoba perbaikan cepat: tampilkan peta Anda hanya di sisi browser, tidak ada elemen window di sisi server (itulah mengapa ini dapat dibuat tetapi gagal saat runtime)

kode semu:

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

@AnthonyNahas saya mencoba solusi Anda tetapi masih mendapat kesalahan yang sama.
saya mencoba menerapkan bundel server saya di fungsi cloud fire ...

tanpa agm semuanya baik-baik saja / berfungsi tetapi dengan agm mendapat kesalahan--

functions [ssr (us-central1)]: Kesalahan penerapan.
Kesalahan pemuatan fungsi: Kode dalam file index.js tidak dapat dimuat.
Apakah ada kesalahan sintaks dalam kode Anda?
Pelacakan tumpukan mendetail: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(fungsi (ekspor, memerlukan, modul, __filename, __dirname)
{impor {Injectable, NgZone} dari '@ angular / core';
^^^^^^

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

tolong dibalas

Itu berarti kompilator babel tidak melakukan tugasnya karena ia akan menggantikan impor. Kedua repo harus tersedia sebelum dikompilasi di github saya. Anda dapat menggunakannya jika Anda tidak dapat melakukan bagian babel.

@AnthonyNahas sejujurnya terima kasih atas solusinya, ini berfungsi untuk saya dengan versi terbaru babel dan sudut 6.

@AnonyNahas

Anda adalah tuhan teman saya ...

Ada beberapa masalah yang mencegah paket itu digunakan di sisi server melalui Angular Universal. Saya telah melakukan pekerjaan serupa di berbagai pustaka (mis. 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), jadi saya pikir saya akan melihatnya.

Singkatnya, saat menargetkan platform server dengan Angular CLI, hanya aplikasinya yang dikompilasi, karena bundel UMD library akan digunakan saat menjalankannya di NodeJS. Seperti yang ditunjukkan oleh @AnthonyNahas , ini berarti bahwa titik masuk paket main harus mengarah ke bundel UMD tersebut, yaitu sesuatu yang dipahami secara native oleh NodeJS.

Selain bundel UMD asli NodeJS, praktik terbaik untuk pustaka sesuai pedoman Angular Package Format adalah juga menerbitkan modul ES ramah-AoT dan file metadata metadata.json , yang sudah dilakukan oleh paket tersebut. Namun, karena https://github.com/angular/angular-cli/issues/7200 , pembuatan Angular Universal saat ini gagal (dengan kesalahan seperti SyntaxError: Unexpected token export ) ketika perpustakaan tersebut diterbitkan sebagai modul ES terpisah sebagai gantinya dari yang rata (fesm), karena impor dalam kemudian akan diselesaikan ke modul ES yang menyebabkan Node gagal karena tidak memahami modul ES

Perbaikannya adalah dengan menggunakan angularCompilerOptions 's flatModuleOutFile & flatModuleId params, sesuai https://angular.io/guide/aot-compiler , dan meneruskan output melalui Rollup , untuk menghasilkan modul ES datar & file pengetikan, lalu setel sebagai titik entri module dan typings . Karena opsi tersebut memerlukan titik masuk unik per perpustakaan, saya harus membagi file utama tsconfig.json untuk mendukung js-marker-clusterer & snazzy-info-window .

Selain itu, konfigurasi rollup mengatur context: 'window' , yang rusak di sisi server, yang saya alihkan kembali ke perilaku default Rollup "ini sebagai tidak ditentukan" (yang meskipun menjadi peringatan, sebenarnya adalah perilaku yang diharapkan).

Terakhir, sekarang setelah build universal aplikasi Anda dikompilasi dengan library ini, Anda perlu memutuskan apa yang harus dilakukan saat runtime / membuat kode itu sendiri Universal friendly, yang saya capai dengan menggunakan isPlatformBrowser(this.platformId) di Google Maps SDK loader load() fungsi untuk melewatkan injeksi. Itu melakukan trik untuk kasus penggunaan kami saat ini, tetapi sebagian besar pengamanan mungkin diperlukan untuk menonaktifkan pustaka itu di sisi server (karena Google Maps SDK tidak akan berjalan di sana).

Bagaimanapun, PR ada di https://github.com/SebastianM/angular-google-maps/pull/1554 , komentar diterima. Saya memiliki garpu yang berjalan di @ laurentgoudet / agm-core yang berhasil saya gunakan untuk proyek saya (sampai PR ini digabungkan). Saya menggunakan Angular CLI tetapi harus bekerja dengan pembuat apa pun - umpan balik diterima.

Setelah banyak mencoba, solusi yang diberikan oleh @AnthonyNahas memungkinkan saya untuk menerapkan aplikasi universal sebagai fungsi firebase :).
Saran saya adalah untuk memeriksa apakah file ts secara efektif diubah menjadi js, jika ada, maka kesalahan tentang impor / ekspor tidak boleh muncul.

Sunting (26/12/2018)
Saya mengalami masalah lagi dengan modul jendela info manis. Saya akhirnya menemukan bahwa babel tidak berjalan ketika saya menggunakan firebase deploy (Ingat bahwa ketika menerapkan AU sebagai fungsi firebase, penginstalan npm dilakukan, yang berarti paket akan menginstal lagi sebagai file ts). Pada akhirnya, saya hanya bercabang pustaka (https://github.com/jota12x/angular-google-maps), menerapkan babel, dan menginstalnya dari repo. Masalah terpecahkan. (Menunggu perbaikan di repo utama sekalipun).

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Ada aktivitas tentang ini? Ini cukup mudah untuk memperbaikinya - hanya perlu mulai menggunakan @angular-devkit/build-angular . Ini adalah salah satu masalah paling serius karena orang memiliki 2 jalan keluar:
1) Gunakan konfigurasi webpack khusus
2) Gunakan beberapa peretasan

dan mulai menggunakan @ angular-devkit / build-angular cukup sederhana dan dapat menghemat waktu peretasan

@AnonyNahas

_Memperbarui solusi ke versi terbaru babel_

@philippeboyd @dkmostafa Saya menyelesaikan masalah yang sama baru-baru ini untuk modul ini dan lainnya seperti -> ngx translate dan banyak lagi ...

solusi (kompilasi file js menjadi es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. tambahkan ini ke proyek root dengan nama .babelrc atau tambahkan preset langsung melalui cli
   { "presets": ["@babel/preset-env"] }
3. tambahkan skrip npm di package.json di lingkup "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. tambahkan skrip postinstall di package.json dalam lingkup "scrtipsts"
   "postinstall": "npm run compile_@agm_core",
5. jalankan npm i untuk menginstal deps. Setelah menginstal deps, skrip postinstall akan berjalan dan babel akan mengkompilasi file js yang ditargetkan
6. menjalankan server Anda dan harus dunia
7. Tolong beri saya umpan balik jika berhasil. Saya melakukan hal yang sama untuk lebih dari 3 modul npm yang berfungsi di mesin saya: D

Terima kasih banyak, ini masih berfungsi di Angular 7

Tapi apakah itu hack ... Atau solusi ...

Pada Tue, Apr 2, 2019, 12:53 PM PEA [email protected] menulis:

@AnthonyNahas https://gub.com/AnthonyNahas

Memperbarui solusi ke versi terbaru babel

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa saya memecahkan masalah yang sama baru-baru ini untuk ini
modul dan lain-lain seperti -> ngx translate dan banyak lagi ...

solusi (kompilasi file js menjadi es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. tambahkan ini ke proyek root dengan nama .babelrc atau tambahkan
   preset langsung melalui cli
   {"preset": ["@ babel / preset-env"]}
3. tambahkan skrip npm di package.json di lingkup "scrtipsts"
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. tambahkan skrip postinstall di package.json dalam lingkup "scrtipsts"
   "postinstall": "npm run compile_ @ agm_core ",
5. jalankan npm i untuk menginstal deps. Setelah memasang deps, file
   skrip postinstall akan berjalan dan babel akan mengkompilasi file js yang ditargetkan
6. menjalankan server Anda dan harus dunia
7. Tolong beri saya umpan balik jika berhasil. Saya melakukan hal yang sama untuk lebih banyak
   dari 3 modul npm bekerja di mesin saya: D

Terima kasih banyak, ini masih berfungsi di Angular 7

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

Saya telah menggunakan solusi @AnthonyNahas tetapi saya mendapatkan kesalahan ini:

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

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 masalahnya tidak terkait langsung dengan pustaka ... tampaknya ini adalah kesalahan kompilasi ...

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Kami akan segera beralih ke ngc, jadi mudah-mudahan ini akan berfungsi dengan Angular Universal. Secara pribadi, saya memiliki 0 pengalaman dan pengetahuan di universal, dan AoT.

Ok, saya menarik ng-packagr PR, jadi mungkin sekarang akan berhasil. Bisakah Anda mencoba master forking dan melihat apakah berhasil?

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Hai @ doom777
Bisakah Anda memberi tahu saya, jika Anda berencana melepaskan penggabungan ini? Saya ingin sekali melepaskan versi patch saya dari pustaka ini :)

Tidak terserah saya