Angular-google-maps: Angular 4 Universal-SyntaxError：予期しないトークンのエクスポート

こんにちは、私はこの問題に対処しなければなりませんでした。これは実際にはAgmの問題ではなく、グローバルな問題です。
Agmを含む最近のパッケージのほとんどは、 importおよびexportキーワードを使用してes6で作成されています。

これはUniversal以前の問題ではありませんでした。たとえば、ローカル開発用のSystem.jsとWebpack / Rollupが本番バンドル用のes6を理解するために、パッケージには常にバンドルファイルが含まれているためです。

しかし、Universalを使用すると、es6でnode_modules内のファイルを直接使用し、ノードはまだimportおよびexportトークンについて認識していません。

2つのことができます。ユニバーサルでもアプリをバンドルできますが、サーバーコンテキストでは役に立たないバンドルの場合、コンパイル時間が大幅に失われます。

私が会社で使用した他のオプションは、コンパイルする前にすべてのソースをtmpフォルダーにコピーし、このtmpフォルダーにnode_modulesフォルダーを作成することです。
次に、すべての@agmフォルダー（tmp内の「偽の」フォルダー内の「実際の」node_moduleフォルダー内のフォルダー）をコピーできます。その後、babelを使用して、commonjsの偽のnode_modulesフォルダーにコピーされたes6ファイルを変換できます。 nodejsは理解します（@agmが必要な場合、ノードは偽のnode_modulesフォルダーでファイルを検索します）

これは非常に煩わしく、今のところ他のオプションはありません（もっと良いものがあれば教えてください）。 ng2モジュールは、モジュールをユニバーサルで簡単に使用できるようにするために、es6ファイルとcommonjsファイルの両方を提供する方法を見つける必要があると本当に思います:)

webpack.configを使用する

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

@kkaabbaaこれが機能することを確認できますか？
それを私のwebpackに追加するだけでは、仕事は終わりませんでした。

私は同じ問題を抱えています、私はバベルを持っていて、新しいフォルダにプロジェクトのコピーを作成し、次にバベルをローカルにインストールしましたが、私はこれを取得する必要があるため、彼が彼の会社のために作ったプロセスを理解したいと思いますよろしくお願いします。

webpack.configに追加しましたが、うまくいきません。

外部：[nodeExternals（{
ホワイトリスト：[
/ ^ @ agm / core /、
]
}）]、

ブラウザかサーバーかに基づいて、agm-mapを含むコンポーネントを動的にロードすることで回避策を実行しています： https ：//angular.io/guide/dynamic-component-loader

es5にコンパイルしましたが、エラーも表示されます

ついにユニバーサルでグーグルマップを使えるようになりました。 私はレポとビデオを作っています

私はこの投稿を使用しましたhttps://medium.com/@evertonrobertoauler/angular-4-universal-app-with-angular-cli-db8b53bba07d

と追加

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

@kkaabbaaどこに追加しましたか？

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

まだ機能していません、@ kkaabbaaソリューションを試し

_ソリューションを最新バージョンのbabelに更新しました_

@philippeboyd @dkmostafa私は最近、このモジュールと-> ngxtranslateなどの他のモジュールで同じ問題を解決しました...

解決策（jsファイルをes2015にコンパイルします）：

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. これを.babelrcという名前でルートプロジェクトに追加するか、CLIを介して直接プリセットを追加します
   { "presets": ["@babel/preset-env"] }

3. 「scrtipsts」スコープのpackage.jsonにnpmスクリプトを追加します
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. 「scrtipsts」スコープのpackage.jsonにポストインストールスクリプトを追加します
   "postinstall": "npm run compile_@agm_core",

5. npm iを実行してdepsをインストールします。 depsをインストールした後、スクリプトpostinstallが実行され、babelがターゲットのjsファイルをコンパイルします

6. あなたのサーバーを実行し、世界

7. うまくいったらフィードバックをください。 私はそれが私のマシンで動作する3つ以上のnpmモジュールに対して同じシンを行いました：D

@AnthonyNahasそれは非常に興味深いアイデアです。 本当であるには良すぎるようです！ やってみます

誰かがこれに対する解決策を持っていますか？ つい最近、これにも遭遇しました。

@adrienboulle説明してくれてありがとう、今私は疑問に思います：

@AnthonyNahas私はそれを試しました。 今それは別のエラーを示しています

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

@AnthonyNahas 、あなたの解決策をどうもありがとう！ 私は約1か月間うまくいかなかった他のいくつかの解決策を試しました！ これは実際に私の問題を解決します=）

@karthikeyanmanureva uは、「SyntaxError：Unexpectedtokenimport」をスローしている別のnpmモジュールに対して同じことを行う必要があります...
@martinreus乾杯

@AnthonyNahasこれは私のために働いた、私はあなたがその解決策をどのように思いついたのか分かりませんが、ありがとう、

@AnthonyNahas 、あなたの解決策は私がこの問題を解決するのを助けてくれました

@AnthonyNahas 、ありがとう、それが機能した1つのモジュール。 しかし今、私は別のパッケージng2-slim-loading-barを使用していて、エラーをスローします：

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

どうすれば修正できますか？

それを除外セクションに追加し、webpackは少なくともそれを試してみてください
動作します

2017年11月20日15：18 GMT + 01：00 lomboboo [email protected] ：

@AnthonyNahas https://github.com/anthonynahas 、ありがとう、1つのモジュール
動いた。 しかし今、私は別のパッケージng2-slim-loading-barを使用しています
https://github.com/akserg/ng2-slim-loading-barそしてそれはエラーをスローします：

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位置：固定; \ nマージン：0; \ nパディング：0; \ nトップ：0; \ n左：0; \ n右：0; \ n zインデックス：99999; \ n} \ n \ n \ n.slim-loading-bar-progress [_ngcontent-％COMP％] {\ nマージン：0; \ nパディング：0; \ n z-インデックス：99998; \ n背景色：緑; \ n色：緑; \ nボックスシャドウ：0 0 10px 0; \ n高さ：2px; \ n不透明度：0; \ n \ n \ n -webkit-transition：すべて0.5sイーズインアウト; \ n-moz-transition：すべて0.5sイーズインアウト; \ n -o-transition：すべて0.5sイーズインアウト; \ nトランジション：すべて0.5sイーズインアウト; \ n} '];
^^^^^^

SyntaxError：予期しないトークンのエクスポート

どうすれば修正できますか？

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
。

@lombobooは、ng2-slim ...モジュールをトランス
->「scrtipsts」スコープのpackage.jsonにnpmスクリプトを追加します
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

次に->

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

->その後、もう一度npm iを実行します

->結果
他のモジュールもトランスパイルする必要があります

@AnthonyNahasどうもありがとう

@AnthonyNahas 、私が言ったように、私はすでにこのモジュールを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"

または、 postinstallフック中に、正確に自分のやり方で行うことが重要ですか？

@AnthonyNahas 、 postinstallフック中に2015年にコンパイルしようとしましたが、とにかくエラーが表示されます。 client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyleファイルはAngularによって生成されたと思いますが、それを機能させる方法がわかりません。

@lomboboo

postinstallでは重要ではありません！

そのブロックは、プロジェクトで使用したものと同じですか？

最初のnpmスクリプトにバグが見つかりました：uはsrc内のこれらのファイル以外のファイルをトランスパイルする必要があるかもしれません->

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

（後）である必要があります->

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

PS：ターミナルからnpmスクリプトを実行する場合、uはbabel代わりにnode_modules/babel-cli/bin/babel.js babel使用できます。 もう1つは、npm経由ではなく、ターミナルからすぐにタスクを実行する場合にのみ役立ちます...

私はこのリポジトリをフォークしたばかりで、予期しないトークンのエクスポート/インポートなど、この種のエラーを解決するためのより良いソリューションをすぐに提供します...開発者がsrcファイルを手動でトランスパイルせずにこのモジュールを使用してカスタムnpmスクリプトを実行できるようにします..

@AnthonyNahas MVP

@AnthonyNahas 、それで私はこの解決策にサーバー用のwebpack.config.jsを作成し、次のように構成しました。

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

したがって、 webpackとwebpack-node-externalsをローカルにインストールする必要があります。 nodeExternals内で、サーバーのコンパイル時に不要なプラグインやパッケージを定義できます。 私の場合、私が説明したエラーをスローするのはng2-slim-loading-barプラグインです。
最後に、サーバースクリプトを実行するときに、 webpackをpackage.jsonに追加します。 私のpackage.jsonは次のようになります。

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

webpack.config.js標準名がない場合は、 webpack引数として正しい名前を指定する必要があります。 例えば、

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

それが誰かの助けになることを願っています。 私の意見では、サーバーで問題が発生しているすべてのプラグインをコンパイルする方がより堅牢なソリューションです。

@AnthonyNahas私は同じ問題に直面していて、あなたの解決策を試しましたが
あなたが解決策で与えた以下の点のために何をすべきか

• これを.babelrcという名前でルートプロジェクトに追加します
  {"プリセット"：["es2015"]}

@Harshketu
プロジェクトのトップレベル（ルート）-> .babelrcという名前のファイルを作成し、貼り付けます
次の-> { "presets": ["es2015"] } <-そのファイル内

@AnthonyNahas
あなたのソリューションはwebpack.configファイルで動作していますか、それとも動作していませんか？

プロジェクトが排出されるかどうかによって異なります。
ただし、コードをes5にトランスパイルしても、webpack.configファイルに直接依存することはありません。

@AnthonyNahasのソリューションに続いて、コンパイルされたバージョンをgitにプッシュして、babelなどをインストールせずにpackage.jsonで直接使用できるようにしました。

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

誰にでも役立つかもしれません。 Firebase Hostingを使用していますが、Firebaseのpackage.jsonでAnthonyが説明したのとまったく同じメソッドを使用しているにもかかわらず、何らかの理由でFirebaseがコードをコンパイルしていないようです。 そのため、この回避策を使用します。

@cmddavidFirebaseでもこの問題が発生しました。 ノードモジュールが再度インストールされ、babel-cliがグローバルにインストールされていないため、Firebaseでは機能しません。

@dockleryxkでは、これは、Firebaseを使用するときに私のソリューションが唯一の実行可能なソリューションであることを意味しますか？

Firebaseがすべてのモジュールを再度インストールする理由を完全には理解していません。 展開前にクライアントで生成されているサーバーバンドルは十分ではありませんか？ 私が知る限り、Firebase Functionによって実行されているノードスクリプトには、非常に限られたノードパッケージのセットしか必要ありません。 確かに@agm/coreパッケージではありません。 サーバーバンドルは展開中にすでにサーバーに送信されているためです。

@cmddavidノードモジュールディレクトリをアップロードするのに長い時間がかかる可能性がある理由は私の推測ですが、実際にはわかりません。 個人的には、コンパイルされたモジュールをfunctionsディレクトリ内のディレクトリに置き、functionsディレクトリのpackage.jsonから参照するだけです。 たとえば"@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahasは私の一日を救った。 このAngularユニバーサルサーバーサイドのレンダリングを数週間実行するのに苦労していました。 あなたの解決策は魅力のように機能しました!!

@AnthonyNahas 、@ agmファイルを開いたとき、ES6構文を見た後、最初に考えたのは、（少なくとも私にとっては）toughtなwebpackを使用してコンパイルすることでした。とにかく、もう一度感謝します。 Angular Universl SSRと今は絶対に元気です！

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })],が私のために仕事をしてくれました。 ありがとうございました。 それ以外の場合は、 @ AnthonyNahasソリューションがその

私は自分のパッケージの1つで同じ問題を抱えていましたが、パッケージ「AngularPackageFormat」を互換性のあるものにすることでうまくいきました。 これは、それを支援するための非常に便利なnpmパッケージです： https ：

そのほとんどのプラグアンドプレイ。

@AnthonyNahas。 これも私のために働いています。
ありがとう

あなたたちはまだこれに問題がありますか？ 私はこのモジュールをユニバーサルプロジェクトで使用していますが、すべてすぐに使用できるファイルです。 どのバージョンを使用していますか？

こんにちは@ AnthonyNahas 、ng2-google-place-autocompleteでこれを機能させることができないようです

このエラーメッセージが表示されます：
`C：\ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts：6
export * from './ src / index';
^^^^^^

SyntaxError：予期しないトークンのエクスポート
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。（無名関数）[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） `

その後、私はあなたの手順に従いました：

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

2. これを.babelrcという名前でルートプロジェクトに追加します
   {"プリセット"：["es2015"]}

3. このスクリプトをpackage.jsonファイルに追加します

「スクリプト」：{
"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. npm iを実行して、depsをインストールします。 depsをインストールした後、スクリプトpostinstallが実行され、babelがターゲットのjsファイルをコンパイルします

2. npm runstartを実行します

3. それでも同じエラーが発生します。

あなたが私を助けることができれば、私はこれを修正するために何時間も費やしたので、それは本当に大きな助けになるでしょう！

@ dockleryxk 、 @ AnthonyNahas 、 @ cmddavidはよりシンプルで簡単な方法です...
ヤーンはagmコンパイルされたものを追加します。 webpackとsytemjsナンセンスがない場合は、angular5 ^ +ユニバーサル+ ssr + firebaseホスティング/関数を使用します。

@retrwoodは素晴らしいですが、NPMバージョンも利用できるといいでしょう。

ありがとう@AnthonyNahas 、
私はCLIツールをイジェクトすることに同意しなかったので、あなたは私の日を救いました、それは本当に素晴らしい回避策です。

どうもありがとうございます。

@ AnthonyNahasbabel -preset-es2015は非推奨になりました。 この問題をどのように処理できますか？

@Gomathipriya質問してくれてありがとう！ あなたは私に最終的にプルリクエストを送信する動機を与えてくれました！

21.9.2017 、このバグを処理するためのソリューションを公開しました！ 当時、ライブラリがbundle es5のような書き込みコードを生成していることを知りませんでした...プロジェクトが多すぎて、 @ agm / coreの実際の問題を見つけることができませんでした。 さて、昨日、 @ agm / coreを使用しているAngularアプリ用のAngularマテリアル拡張機能を開発していましたが、 jestを試してみたときに同じ問題に直面しました。 そこで、このプロジェクトをさらに検討することにし、何か面白いものを見つけました。

実際、このプロジェクトのビルドですでにコードがes5にトランスパイルされているため、コードをes5にトランスパイルする必要はありません。 しかし、typescriptはそれらについて知りません！ package.json一部の情報が欠落しています。

だからそれを解決するためのヒント：

1. cd node_modules
2. cd \@agm/core
3. package.json開きます
4. そして、以下を追加します

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

そしてバグは解決されるべきです！ これで、コンパイル時に、typescriptが適切なjsコードを選択します！

数秒前にプルリクエストを送信しました。

お使いのマシンでテストした後、このPRをサポートしてください！

このプロジェクトで次のシナリオをテストします@ angular-material-extensions / google-maps-autocomplete

プロジェクトが気に入ったら、主演してシェアしてください！

ありがとうございました👍❤️

連絡あった ？ @SebastianM

@bastienlemaitrePRを調整します

ここを見てください：

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

トリックがあなたのためにそれをしたかどうか教えてください！

@AnthonyNahasマップクラスターパッケージでも同じ問題が発生しています。 大変イライラします。時間を割いて作業していただきありがとうございます。 PRのレビュー中に実装できる提案されたソリューションはありますか？

これを手動で追加してテストに合格させることはできますが、パイプラインでは失敗します。

@Gomathipriya上記のソリューションを最新バージョンの@ angular-material-extensions / google-maps-autocompleteでプロセスをテストしました。

ここでcircleciのステータスを確認してください

travis-ciステータスはこちら

@mcblumおそらくコアモジュールと同じものでなければなりません（上記の解決策を参照してください）

乾杯🍻

Agmは本当に素晴らしくて便利ですが、残念ながら私はPRに関して手伝うことができず、おそらく私には複雑すぎました。

そこで、Google Maps Javascript APIのカスタムコードを実装することにしました。これは、今日公開したweb-google-mapsという新しいWebコンポーネントになり、問題を解決するためにプロジェクトの代わりに使用しました。

繰り返しになりますが、Agmは素晴らしく、このWebコンポーネントはこのライブラリほど多くの可能性を提供していません。 問題に直面している誰かが潜在的な解決策を急いで見つけようとしている場合に備えて、これらの行を書いて言及しようと思っただけです。

ビルド中に問題はありませんが、サーバー側でレンダリングされるはずのページをリクエストすると、次のエラーが発生します。

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は、簡単な修正を試してみてください。マップをブラウザ側にのみ表示し、サーバー側にはwindow要素がありません（そのため、ビルドできますが、実行時に失敗します）

擬似コード：

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

@AnthonyNahas私はあなたの解決策を試しましたが、それでも同じエラーが発生しました。
クラウドファイア機能でサーバーバンドルをデプロイしようとしています...

agmがない場合はすべて問題ありませんが、agmがある場合はエラーが発生します-

関数[ssr（us-central1）]：展開エラー。
関数の読み込みエラー：ファイルindex.jsのコードを読み込めません。
コードに構文エラーがありますか？
詳細なスタックトレース：/user_code/node_modules/@agm/core/services/managers/circle-manager.js：1
（関数（exports、require、module、__ filename、__ dirname）
{import {Injectable、NgZone} from '@ angular / core';
^^^^^^

SyntaxError：予期しないトークンのインポート
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）で
必要に応じて（internal / module.js：20：19）
Object。@ agm / core / services / managers / circle-manager（/user_code/dist/server/main.js:4999:18）

返信してください

つまり、babelコンパイラは、インポートに取って代わったので、その仕事をしませんでした。 両方のリポジトリは、私のgithubでコンパイル済みで利用できるはずです。 あなたがバベルの部分をすることができないならば、あなたはそれを使うかもしれません。

@AnthonyNahasはあなたの解決策に正直に感謝します、それは最新バージョンのbabelと

@AnthonyNahas

あなたは私の友達の神です...

そのパッケージがAngularUniversalを介してサーバー側で使用されるのを妨げる複数の問題があります。 私はすでにさまざまなライブラリで同様の作業を行っています（例：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）なので、見てみようと思いました。

つまり、Angular CLIを使用してサーバープラットフォームをターゲットにする場合、アプリ自体のみがコンパイルされます。これは、NodeJSで実行するときにライブラリUMDバンドルが使用されるためです。 @AnthonyNahasが指摘しているmainパッケージエントリポイントが、前述のUMDバンドル、つまりNodeJSがネイティブに理解するものを指している必要があることを意味します。

NodeJSネイティブUMDバンドルに加えて、 Angular Package Formatガイドラインに従ったライブラリのベストプラクティスは、AoT対応のESモジュールとmetadata.jsonメタデータファイルも公開することです。これは、そのパッケージがすでに行っています。 ただし、 https：//github.com/angular/angular-cli/issues/7200が原因で、ライブラリが個別のESモジュールとして公開されている場合、Angular Universalビルドは現在失敗します（ SyntaxError: Unexpected token exportようなエラーが発生します）。ディープインポートがESモジュールに解決され、ノードがESモジュールを理解しないために失敗するため、フラット化されたもの（fesm）の

修正は、 https： //angular.io/guide/aot-compilerに従って、 angularCompilerOptionsのflatModuleOutFileとflatModuleIdパラメーターを使用し、出力をロールアップに渡すことです。 、フラットESモジュールとタイピングファイルを作成し、それらをmoduleおよびtypingsエントリポイントとして設定します。 これらのオプションにはライブラリごとに一意のエントリポイントが必要なため、 js-marker-clustererとsnazzy-info-windowをサポートするために、メインのtsconfig.jsonファイルを分割する必要がありました。

さらに、ロールアップ構成はcontext: 'window'を設定していました。これはサーバー側で機能しなくなり、ロールアップのデフォルトの「未定義としてこれ」の動作に切り替えました（これは警告ですが、実際には予期される動作です）。

最後に、アプリのユニバーサルビルドがこのライブラリでコンパイルされるので、実行時に何をするかを決定する必要があります/コード自体をユニバーサルフレンドリーにする必要があります。これは、Google Maps SDKローダーload() isPlatformBrowser(this.platformId)を使用して実現しました。注入をスキップするload()関数。 これは現在のユースケースではうまくいきますが、サーバー側でそのライブラリを無効にするためにほとんどのセーフガードが必要になる可能性があります（Google Maps SDKはとにかくそこで実行されないため）。

とにかく、PRはhttps://github.com/SebastianM/angular-google-maps/pull/1554にあり、コメントを歓迎します。 @ laurentgoudet / agm-coreで実行されているフォークがあり、プロジェクトで正常に使用しています（このPRがマージされるまで）。 私はAngularCLIを使用していますが、どのビルダーでも機能するはずです-フィードバックを歓迎します。

何度も試した後、 @ AnthonyNahasが提供するソリューションにより、ユニバーサルアプリを
私の提案は、tsファイルが効果的にjsに変換されているかどうかを確認することです。変換されている場合は、インポート/エクスポートに関するエラーが表示されないようにする必要があります。

編集（2018年12月26日）
おしゃれな情報ウィンドウモジュールで再び問題が発生します。 Firebase Deployを使用しているときにbabelが実行されていないことに気付きました（AUをFirebase関数としてデプロイすると、npmインストールが実行されます。つまり、パッケージはtsファイルとして再度インストールされます）。 最後に、ライブラリ（https://github.com/jota12x/angular-google-maps）をフォークし、babelを適用して、リポジトリからインストールしました。 問題が解決しました。 （ただし、メインリポジトリでの修正を待っています）。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

これに関する活動はありますか？ 修正は非常に簡単です。 @angular-devkit/build-angular使用を開始する必要があります。 人々には2つの方法があるため、これは最も深刻な問題の1つです。
1）カスタムwebpack構成を使用する
2）いくつかのハックを使用する

@ angular-devkit / build-angularの使用を開始するのは非常に簡単で、ハッキングの時間を節約できます

@AnthonyNahas

_ソリューションを最新バージョンのbabelに更新しました_

@philippeboyd @dkmostafa私は最近、このモジュールと-> ngxtranslateなどの他のモジュールで同じ問題を解決しました...

解決策（jsファイルをes2015にコンパイルします）：

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. これを.babelrcという名前でルートプロジェクトに追加するか、CLIを介して直接プリセットを追加します
   { "presets": ["@babel/preset-env"] }
3. 「scrtipsts」スコープのpackage.jsonにnpmスクリプトを追加します
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. 「scrtipsts」スコープのpackage.jsonにポストインストールスクリプトを追加します
   "postinstall": "npm run compile_@agm_core",
5. npm iを実行してdepsをインストールします。 depsをインストールした後、スクリプトpostinstallが実行され、babelがターゲットのjsファイルをコンパイルします
6. あなたのサーバーを実行し、世界
7. うまくいったらフィードバックをください。 私はそれが私のマシンで動作する3つ以上のnpmモジュールに対して同じシンを行いました：D

どうもありがとう、それはまだAngular7で動作しています

しかし、それはハックです...または回避策...

火、2019年4月2日には、12：53 PMのPEAの[email protected]は書きました：

@AnthonyNahas https://github.com/AnthonyNahas

ソリューションを最新バージョンのbabelに更新しました

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa私は最近これについて同じ問題を解決しました
モジュールなど-> ngxtranslateなど...

解決策（jsファイルをes2015にコンパイルします）：

1. npm install --save-dev @ babel / core @ babel / cli @ babel / prefix-env
2. これを.babelrcという名前でルートプロジェクトに追加するか、
   CLIを介して直接プリセット
   {"プリセット"：["@ babel / preset-env"]}
3. 「scrtipsts」スコープのpackage.jsonにnpmスクリプトを追加します
   " compile_ @ agm_core "： "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / prefix-env "、
4. 「scrtipsts」スコープのpackage.jsonにポストインストールスクリプトを追加します
   "postinstall"： "npm run compile_ @ agm_core "、
5. npm iを実行して、depsをインストールします。 depsをインストールした後、
   スクリプトpostinstallが実行され、babelが対象のjsファイルをコンパイルします
6. あなたのサーバーを実行し、世界
7. うまくいったらフィードバックをください。 私はもっ​​と多くのために同じシンをしました
   3 npmモジュールよりも私のマシンで動作します：D

どうもありがとう、それはまだAngular7で動作しています

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
。

@AnthonyNahasのソリューションを使用しましたが、次のエラーが発生します。

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

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96問題はライブラリに直接関係していません...コンパイルエラーのようです...

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

間もなくngcに移行する予定なので、AngularUniversalで動作することを願っています。 個人的には、ユニバーサルとAoTの経験と知識はありません。

わかりました、私はng-packagr PRを取り込んだので、多分今それはうまくいくでしょう。 マスターをフォークして、それが機能するかどうかを確認してみてください。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

こんにちは@ doom777
このマージをリリースする予定があるときに教えてください。 このライブラリのパッチを当てたバージョンを削除したいと思います:)

私次第ではない