Angular-google-maps: Angular 4 Universal-SyntaxError：意外的令牌导出

您好，我不得不处理这个问题，这实际上不是一个Agm问题，而是一个全球性的问题。
包括Agm在内的大多数最新软件包都在es6中编译，并带有import和export关键字。

在Universal之前这不是问题，因为软件包中始终有一个捆绑文件，可以说，System.js（用于本地开发人员）和Webpack / Rollup将理解es6（用于生产捆绑）。

但是使用Universal时，您可以直接在es6中使用node_modules中的文件，而node尚不知道import和export令牌。

可以做两件事，即使是通用的，您也可以捆绑应用程序，但是对于在服务器上下文中无用的捆绑包，您将浪费大量的编译时间。

我在公司使用的另一种选择是在编译之前将所有源代码复制到tmp文件夹中，并在此tmp文件夹中创建一个node_modules文件夹。
然后，您可以复制所有@agm文件夹（tmp中“ fake”文件夹中的“ real” node_module文件夹中的一个）。然后，您将能够使用babel转换在commonjs中伪造的node_modules文件夹中复制的es6文件， nodejs会理解（当您需要@agm节点时，它将在伪造的node_modules文件夹中查找文件）

这太烦人了，目前还没有其他选择（如果您找到更好的选择，请告诉我）。 我真的认为ng2模块必须找到一种方法来提供es6和commonjs文件，如果它们希望它们的模块易于使用Universal :)

使用webpack.config

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

@kkaabbaa您可以确认这有效吗？
仅仅将其添加到我的webpack并不能完成工作。

我有同样的问题，我有babel，我确实在一个新文件夹中复制了项目，然后在本地安装了babel，但我想了解Adrienboulle他为公司制作的流程，因为我必须先得到这个事先谢谢你。

我已经将它添加到webpack.config中，它对我没有用。

外部：[nodeExternals（{
白名单： [
/ ^ @ agm / core /，
]
}）]，

我通过基于浏览器或服务器的动态加载包含我的agm-map的组件来解决该问题： https :

我已经编译到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我最近为这个模块和其他问题解决了相同的问题，例如-> ngx翻译等等。

解决方案（将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后，脚本将运行后安装，而babel将编译目标js文件

6. 运行您的服务器，应该世界

7. 如果有效，请给我反馈。 我为在我的机器上工作的3个以上npm模块做了同样的设置：D

@AnthonyNahas这是一个非常有趣的想法。 看起来真是太好了！ 我去吧

有人对此有解决方案吗？ 就在最近也遇到了这一点。

@adrienboulle感谢您的解释，现在我想知道：以适合Angular Universal的其他格式发布该软件包是否会更好？ 这样，就不再需要这里流通的所有解决方法。 还是有可能使Angular Universal理解ES6代码？

@AnthonyNahas我尝试过了。 现在它显示了另一个错误

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

@AnthonyNahas ，非常感谢您的解决方案！ 我尝试了其他几种解决方案，这些解决方案在大约一个月内对我不起作用！ 这实际上解决了我的问题=）

@karthikeyanmanureva您应该为另一个npm模块做同样的事情，该模块抛出“ SyntaxError：意外的令牌导入” ...
@martinreus干杯

@AnthonyNahas这对我

@AnthonyNahas ，您的解决方案帮助我解决了这个问题

@AnthonyNahas ，谢谢，它起作用了一个模块。 但是现在我正在使用另一个包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 ，谢谢你的一个模块
有效。 但是现在我正在使用另一个软件包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

导出const样式：任何[] = ['.slim-loading-bar [_ngcontent-％COMP％] {\ n位置：固定； \ n边距：0； \ n填充：0； \ n顶部：0； \ n左：0; \ n右：0; \ n z-index：99999； \ n} \ n \ n \ n.slim-loading-bar-progress [_ngcontent-％COMP％] {\ n边界：0; \ n填充：0； \ n z-index：99998； \ n背景色：绿色； \ n颜色：绿色； \ n框阴影：0 0 10px 0; \ n高度：2px； \ n不透明度：0； \ n \ n \ n -webkit-transition：全部0.5s缓入； \ n -moz过渡：全部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添加新的npm脚本以转换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年，但无论如何都会出现错误。 我认为Angular会生成client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle文件，但我不知道如何使其工作。

@lomboboo

在postinstall上并不重要！

该块与您在项目中使用的块相同吗？

我在第一个npm脚本中发现了一个错误：除了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脚本，则可以使用babel代替node_modules/babel-cli/bin/babel.js 。 另一个仅在您从终端而不是通过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”]}

@哈什克图
在项目的顶层（根目录）->创建一个名称为.babelrc的文件并粘贴
该文件中的以下-> { "presets": ["es2015"] } <-

@安东尼·纳哈斯
您的解决方案是使用webpack.config文件还是不使用？

这取决于您的项目是否弹出。
但是，将代码转换为es5并不直接依赖于webpack.config文件

遵循@AnthonyNahas的解决方案后，我将编译后的版本推送到git，以便无需安装babel等即可直接在package.json中使用它：

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

可能对任何人有用。 我正在使用Firebase Hosting，由于某种原因，即使我使用的方法与Anthony在Firebase的package.json上所述的方法完全相同，Firebase似乎也没有在编译代码。 因此，这就是为什么我使用此替代方法。

@cmddavid我

@dockleryxk ，这是否意味着我的解决方案是使用Firebase时唯一可行的解​​决方案？

我不完全理解Firebase为什么要重新安装所有模块。 部署之前在客户端上生成的服务器捆绑包是否不够？ 据我所知，Firebase Function正在执行的节点脚本仅需要非常有限的一组节点程序包。 当然不是@agm/core软件包。 由于服务器捆绑已在部署期间发送到服务器。

@cmddavid上载节点模块目录可能会花费很长时间，这可能是我的猜测，但我实际上并不知道。 就个人而言，我将编译后的模块放在functions目录中的目录中，并仅从functions目录中的package.json引用它。 例如"@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas挽救了我的一天。 努力使这个Angular Universal Server Side渲染现在已经开始运行了几个星期。 您的解决方案就像魅力一样！！

@AnthonyNahas ，非常感谢，对我来说很好，当我打开@agm文件时，在看到ES6语法后，首先想到了使用webpack进行编译，这是一个艰难的过程（对我来说至少是这样），无论如何再次感谢，已经设置Angular Universl SSR，现在绝对好！

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })],为我完成了工作。 谢谢你。 否则@AnthonyNahas解决方案应该可以完成这项工作。

我自己的一个软件包也遇到了同样的问题，结果证明使软件包“ Angular Package Format”兼容可以解决问题。 这是一个非常有用的npm软件包，可以帮助您解决此问题： https :

它即插即用。

@AnthonyNahas。 这也为我工作。
谢谢

你们还有这个问题吗？ 我在通用项目中使用了这个模块，并且所有的工作文件都是开箱即用的。 您正在使用什么版本？

@AnthonyNahas ，您好，我似乎无法将其用于ng2-google-place-autocomplete

我收到此错误消息：
`C：\ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts：6
从'./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。处（匿名函数）[作为.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）
在要求时（internal / module.js：11：18）`

然后，我按照您的步骤操作：

1. npm i-保存-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后，脚本将运行后安装，而babel将编译目标js文件

2. 运行npm运行开始

3. 我仍然得到相同的错误错误。

如果您能帮助我，那将是非常有用的帮助，因为我已经花费了数小时试图解决此问题！

@dockleryxk ， @AnthonyNahas ， @cmddavid是一种更简单，更容易的方法...
纱线加agm编译。 在没有webpack和sytemjs的情况下，可以使用angular5 ^ +通用+ ssr + firebase托管/功能。

@retrwood太好了，不过也可以提供NPM版本。

谢谢@AnthonyNahas ，
您保存了我的一天，这真的很棒，因为我不同意弹出cli工具。

非常感谢。

@AnthonyNahas babel-preset-es2015现在已弃用。 我们如何处理这个问题？

@Gomathipriya感谢您的

21.9.2017 ，我发布了解决此错误的解决方案！ 在那个时候，我不知道该库产生像束，ES5写代码......我有太多的项目，我是不是能找到什么事情真的错了@ AGM /核心！ 好吧，昨天我正在为使用@ agm / core的角度应用程序开发角度材料扩展，并且在使用jest进行测试时遇到相同的问题。 因此，我决定进一步研究该项目，发现了一些有趣的东西。

实际上，我们不再需要将代码转换为es5了，因为该项目的构建已经为我们完成了。 但是打字稿不知道它们！ 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",

该错误应得到解决！ 现在，在编译时，打字稿将选择正确的js代码！

我几秒钟前发送了请求请求！

在您的计算机上对其进行测试后，请支持此PR ！

我在此项目中的以下场景中测试了以下场景@ angular-material-extensions / google-maps-autocomplete

如果您喜欢这个项目，请加注星标并分享给我，以支持我！

谢谢大家👍❤️

任何新闻 ？ @SebastianM

@bastienlemaitre我将调整我的PR

在这里看看：

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我刚刚将上述发布的解决方案更新为babel v7.1.0的最新版本，我在自己的npm组件@ angular-material-extensions / google-maps-autocomplete中测试了该过程

在这里检查circleci状态

travis-ci状态在这里

@mcblum您可能应该像核心模块一样（请参阅上面发布的解决方案）

欢呼🍻

Agm确实很棒而且很方便，但不幸的是，我无法提供有关PR的帮助，这可能对我来说太复杂了。

因此，我决定为Google Maps Javascript API实现一个自定义代码，该代码变成了一个名为web-google-maps的新Web组件，我今天发布了该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我尝试了您的解决方案，但仍然遇到相同的错误。
我正在尝试在Cloud Fire功能上部署我的服务器捆绑软件...

没有agm，一切正常/正常，但有agm时出现错误-

functions [ssr（us-central1）]：部署错误。
函数加载错误：无法加载文件index.js中的代码。
您的代码中是否存在语法错误？
详细的堆栈跟踪：/user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
（函数（导出，需求，模块，__ filename，__ dirname）
{从'@ angular / core'导入{Injectable，NgZone};
^^^^^^

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中进行预编译。 如果您无法执行babel部分，则可以使用它。

@AnthonyNaha非常感谢您的解决方案，它正在为我使用最新版本的babel和angular 6。

@安东尼·纳哈斯

你是神我的朋友...

有多个问题阻止该软件包通过Angular Universal在服务器端使用。 我已经在各种库上进行了类似的工作（例如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软件包格式准则进行的库最佳实践还包括发布AoT友好型ES模块和metadata.json元数据文件，该软件包已经这样做了。 但是，由于https://github.com/angular/angular-cli/issues/7200 ，当将所述库发布为单独的ES模块时，Angular Universal构建当前失败（带有SyntaxError: Unexpected token export -类似错误）扁平化（fesm），因为深度导入随后将解析到ES模块，从而导致Node因不了解ES模块而失败

解决方法是按照https://angular.io/guide/aot-compiler使用angularCompilerOptions的flatModuleOutFile和flatModuleId参数，并通过Rollup传递输出，以生成平面ES模块和类型文件，然后将其设置为module和typings入口点。 由于这些选项每个库都需要一个唯一的入口点，因此我不得不拆分主要的tsconfig.json文件以支持js-marker-clusterer和snazzy-info-window 。

此外，汇总配置还设置了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被合并）。 我正在使用Angular CLI，但它应与任何构建器一起使用-欢迎反馈。

经过大量尝试， @ AnthonyNahas提供的解决方案使我能够将通用应用程序部署为
我的建议是检查ts文件是否有效地转换为js，如果确实如此，则不得出现有关导入/导出的错误。

编辑（26/12/2018）
我使用时髦的信息窗口模块再次遇到该问题。 我最终发现在使用Firebase deploy时babel并未运行（请记住，将AU部署为firebase函数时，将执行npm install，这意味着该软件包将再次作为ts文件安装）。 最后，我只是分叉了库（https://github.com/jota12x/angular-google-maps），应用了babel，然后从仓库中安装了它。 问题解决了。 （不过，正在等待主存储库中的修复程序）。

由于此问题最近没有活动，因此已被自动标记为陈旧。 如果没有其他活动发生，它将关闭。 感谢你的贡献。

有任何活动吗？ 修复非常简单-只需开始使用@angular-devkit/build-angular 。 这是最严重的问题之一，因为人们有两种解决方法：
1）使用自定义Webpack配置
2）使用一些技巧

并开始使用@ angular-devkit / build-angular非常简单，可以节省数小时的黑客攻击

@安东尼·纳哈斯（AnthonyNahas）

_将解决方案更新为最新版本的babel_

@philippeboyd @dkmostafa我最近为这个模块和其他问题解决了相同的问题，例如-> ngx翻译等等。

解决方案（将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后，脚本将运行后安装，而babel将编译目标js文件
6. 运行您的服务器，应该世界
7. 如果有效，请给我反馈。 我为在我的机器上工作的3个以上npm模块做了同样的设置：D

非常感谢，它仍适用于Angular 7

但是多数民众赞成在破解...或解决方法...

在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我最近为此解决了同样的问题
模块和其他--ngx翻译等等。。。

解决方案（将js文件编译到es2015中）：

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-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 / preset-env“，
4. 在“ scrtipsts”范围的package.json中添加后安装脚本
   “ postinstall”：“ npm run compile_ @ agm_core ”，
5. 运行npm i以安装deps。 安装部门后，
   脚本后安装将运行，而babel将编译目标js文件
6. 运行您的服务器，应该世界
7. 如果有效，请给我反馈。 我做了更多的相同的薄
   超过3个npm模块在我的机器上工作：D

非常感谢，它仍适用于Angular 7

-
您收到此邮件是因为您评论了。
直接回复此电子邮件，在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，因此希望它可以与Angular Universal一起使用。 就个人而言，我在通用和AoT方面拥有0的经验和知识。

好的，我加入了ng-packagr PR，所以也许现在可以了。 您可以尝试分派master并查看它是否有效吗？

由于此问题最近没有活动，因此已被自动标记为陈旧。 如果没有其他活动发生，它将关闭。 感谢你的贡献。

嗨@ doom777
当您计划发布此合并时，您能告诉我吗？ 我很想删除这个库的补丁版本:)

不由我决定