Angular-google-maps: Angular 4 Universal - SyntaxError: неожиданный экспорт токена

Здравствуйте, мне пришлось столкнуться с этой проблемой, которая на самом деле не является проблемой Agm, а является глобальной.
Большинство последних пакетов, включая Agm, скомпилированы на es6 с ключевыми словами import и export .

Это не было проблемой до Universal, поскольку в пакетах всегда есть файл пакета, скажем, System.js для локального разработчика, а Webpack / Rollup понимает es6 для производственных пакетов.

Но с Universal вы напрямую используете файлы в node_modules, тогда в es6, а node еще не знает о токенах import и export .

Можно сделать две вещи: вы можете связать свое приложение даже для универсального, но вы потеряете много времени на компиляцию для пакета, который бесполезен в контексте сервера.

Другой вариант, который я использовал в своей компании, - это скопировать все ваши источники в папку tmp перед компиляцией и создать папку node_modules в этой папке tmp.
Затем вы можете скопировать всю папку @agm (ту, что находится в «настоящей» папке node_module в «поддельной» папке в tmp. Затем вы сможете использовать babel для преобразования файлов es6, скопированных в поддельную папку node_modules в commonjs, которые nodejs поймет. (когда вам потребуется @agm, узел будет искать файл в поддельной папке node_modules)

Это очень раздражает, и на данный момент нет других вариантов (дайте мне знать, если вы найдете лучший). Я действительно думаю, что модули ng2 должны найти способ предоставлять файлы как es6, так и commonjs, если они хотят, чтобы их модули были просты в использовании с универсальным :)

Используйте webpack.config

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

@kkaabbaa, можете ли вы подтвердить, что это работает?
Простое добавление его в мой веб-пакет не помогло.

У меня та же проблема, у меня есть babel, и я сделал копию проекта в новой папке, а затем локально установил babel, но я хотел бы понять процесс, который Адриенбулль выполняет для своей компании, потому что я должен получить это вещь спасибо заранее.

Я добавил его в webpack.config, и он у меня не работает.

внешние: [nodeExternals ({
белый список: [
/ ^ @ agm / core /,
]
})],

У меня есть обходной путь путем динамической загрузки компонента, содержащего мою agm-карту, в зависимости от того, браузер это или сервер: https://angular.io/guide/dynamic-component-loader

Я скомпилировал в es5, но также показываю ошибку

Наконец-то смог использовать карту Google с универсальным. Делаю репо и видео

Я использовал этот пост 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 translate и многое другое ...

решение (скомпилируйте файлы js в es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. добавьте это в корневой проект под именем .babelrc или добавьте пресеты напрямую через cli
   { "presets": ["@babel/preset-env"] }

3. добавить сценарий npm в package.json в области "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. добавить сценарий postinstall в package.json в области "scrtipsts"
   "postinstall": "npm run compile_@agm_core",

5. запустите npm i чтобы установить deps. После установки deps будет запущен скрипт postinstall, и 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 u должен сделать то же самое для другого модуля npm, который выдает "SyntaxError: Unexpected token import" ...
@martinreus ура

@AnthonyNa, у меня это сработало, я не знаю, как вы пришли к

@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

Есть идеи, как это исправить?

добавьте его в раздел исключения, и веб-пакет хотя бы попробуйте, чтобы увидеть,
работает

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

экспорт константных стилей: 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 отступ: 0; \ n z-index: 99998; \ n цвет фона: зеленый; \ n цвет: зеленый; \ n тень блока: 0 0 10px 0; \ n height: 2px; \ n непрозрачность: 0; \ n \ n \ n -webkit-transition: все 0,5 с легкость входа-выхода; \ n -moz-transition: все 0,5 с легкость входа-выхода; \ n -o-transition: все 0,5 с легкость выхода; \ n переход: все 0,5 с легкость входа-выхода; \ 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 ...
-> добавить сценарий npm в package.json в области "scrtipsts"
"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 , я пробовал скомпилировать до 2015 года во время хука postinstall , но ошибка все равно появляется. Я думаю, что файл client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle сгенерирован Angular, но я понятия не имею, как заставить его работать.

@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"]}

@Harshketu
в вашем проекте на верхнем уровне (корень) -> создайте файл с именем .babelrc и вставьте
следующее -> { "presets": ["es2015"] } <- в этом файле

@AnthonyNahas
ваше решение работает с файлом webpack.config или без него?

это зависит от того, будет ли ваш проект выброшен .
Однако перенос кода в es5 не имеет прямой зависимости от файла webpack.config.

Следуя своему решению @AnthonyNa , я

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

Может быть кому-нибудь полезен. Я использую хостинг Firebase, и по какой-то причине Firebase, похоже, не компилирует код, хотя я использую точно такой же метод, как описано Энтони в package.json для Firebase. Вот почему я использую этот обходной путь.

@cmddavid Я

@dockleryxk, значит ли это, что мое решение - единственное работоспособное решение при использовании Firebase?

Я не совсем понимаю, почему Firebase снова устанавливает все модули. Разве не достаточно серверного пакета, который создается на клиенте перед развертыванием? Насколько я могу судить, сценарий узла, выполняемый функцией Firebase, требует только очень ограниченного набора пакетов узлов. Уж точно не пакет @agm/core . Поскольку пакет сервера уже отправляется на сервер во время развертывания.

@cmddavid Я предполагаю, почему загрузка каталога модулей узлов может занять много времени, но на самом деле я не знаю. Лично я помещаю скомпилированные модули в каталог внутри каталога функций и просто ссылаюсь на него из package.json в каталоге функций. Например "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNa спас мне день. Уже несколько недель пытался запустить этот Angular Universal Server Side рендеринг и запустить его. Ваше решение сработало как шарм !!

@AnthonyNahas , большое @agm , увидев синтаксис ES6, сначала подумал о компиляции с использованием webpack, который является продуманным (по крайней мере, для меня), в любом случае еще раз спасибо, настройте Angular Universl SSR и теперь все в порядке!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], сделал за меня работу. Спасибо. В противном случае решение @AnthonyNahas должно работать.

У меня была такая же проблема с одним из моих собственных пакетов, и оказалось, что совместимость с пакетом "Angular Package Format" помогала. Это очень полезный пакет npm, который поможет в этом: https://github.com/dherges/ng-packagr

Это в значительной степени подключи и работай.

@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. (анонимная функция) [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)
при требовании (internal / module.js: 11: 18) `

Затем я последовал вашим шагам:

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

2. добавьте это в корневой проект под именем .babelrc
   {"пресеты": ["es2015"]}

3. добавить этот скрипт в мой файл package.json

"scripts": {
"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 run start

3. Я все еще получаю сообщение об ошибке та же ошибка.

Если бы вы могли мне помочь, это было бы действительно большим подспорьем, поскольку я часами пытался это исправить!

@dockleryxk , @AnthonyNahas , @cmddavid - более простой и легкий способ ...
пряжа добавить agm-compiled. Без бреда webpack и sytemjs работать angular5 ^ + universal + ssr + firebase hosting / functions.

@retrwood , это здорово, хотя было бы неплохо иметь и версию NPM.

Спасибо @AnthonyNahas ,
Вы спасли мне день, это действительно отличная работа, так как я не был согласен с извлечением инструмента cli.

Большое спасибо.

@AnthonyNahas babel-preset-es2015 теперь устарел. Как мы можем решить эту проблему?

@Gomathipriya, спасибо, что спросили! Вы дали мне мотивацию, наконец, отправить запрос на перенос!

21.9.2017 , я опубликовал решение для устранения этой ошибки! В то время я не знал, что библиотека генерирует код записи, такой как bundle, es5 ... У меня было слишком много проектов, и я не мог найти, что действительно не так с @ agm / core ! Что ж, вчера я разрабатывал расширения материалов angular для приложений angular, которые используют @ 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 Я скорректирую свой пиар

посмотрите здесь:

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

скажите, помог ли вам трюк!

@AnthonyNaha, мы наблюдаем ту же проблему с пакетом кластеризации карт. Очень неприятно, я ценю, что вы нашли время поработать над этим. Есть ли предлагаемое решение, которое я мог бы реализовать, пока 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, который я опубликовал сегодня и использовал в качестве замены в моем проекте, чтобы решить эту проблему.

Опять же, Agm великолепен, и этот веб-компонент не предлагает столько возможностей, как эта библиотека. Я просто подумал, что напишу эти строки и упомяну об этом на тот случай, если кто-то, столкнувшийся с проблемой, поспешит найти потенциальное решение, больше ничего.

У меня нет проблем при сборке, но при запросе страницы, которая должна отображаться на стороне сервера, я получаю следующую ошибку:

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 ошибка -

functions [ssr (us-central1)]: ошибка развертывания.
Ошибка загрузки функции: не удается загрузить код в файле index.js.
Есть ли в вашем коде синтаксическая ошибка?
Подробная трассировка стека: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(функция (экспорт, требование, модуль, __filename, __dirname)
{импортировать {Injectable, NgZone} из '@ 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 / manager / circle-manager (/user_code/dist/server/main.js:4999:18)

ответьте, пожалуйста

Это означает, что компилятор babel не выполнил свою работу, поскольку он заменил бы импорт. Оба репозитория должны быть доступны предварительно скомпилированными в моем github. Вы можете использовать это, если не можете сыграть вавилонскую часть.

@AnthonyNa искренне благодарит вас за ваше решение, оно работает для меня с последней версией babel и angular 6.

@AnthonyNahas

Ты бог мой друг ...

Существует несколько проблем, препятствующих использованию этого пакета на стороне сервера через 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 компилируется только само приложение, так как пакет UMD библиотеки затем будет использоваться при его запуске в NodeJS. Как указывает @AnthonyNahas , это означает, что точка входа пакета main должна указывать на указанный UMD-пакет, то есть на то, что NodeJS изначально понимает.

Помимо собственного пакета UMD для NodeJS, лучшие практики для библиотек в соответствии с руководящими принципами Angular Package Format включают также публикацию AoT-дружественных модулей ES и файлов метаданных metadata.json , которые этот пакет уже делает. Однако из-за https://github.com/angular/angular-cli/issues/7200 сборка Angular Universal в настоящее время терпит неудачу (с ошибками типа SyntaxError: Unexpected token export ), когда указанная библиотека вместо этого публикуется как отдельные модули ES. плоского (fesm), поскольку глубокий импорт затем будет разрешен для модулей ES, что приведет к сбою Node, поскольку он не понимает модули ES

Исправление заключается в использовании angularCompilerOptions flatModuleOutFile & flatModuleId в соответствии с https://angular.io/guide/aot-compiler и передаче вывода через Rollup , чтобы создать плоский модуль ES и файлы типизации, а затем установить их как точки входа module и typings . Поскольку эти параметры требуют уникальной точки входа для каждой библиотеки, мне пришлось разделить основные файлы tsconfig.json , чтобы поддерживать js-marker-clusterer & snazzy-info-window .

Кроме того, в конфигурациях накопительного пакета было установлено значение context: 'window' , которое прерывается на стороне сервера, которое я переключил обратно на поведение Rollup по умолчанию «this as undefined» (которое хотя и является предупреждением, но на самом деле является ожидаемым поведением).

Наконец, теперь, когда универсальная сборка вашего приложения компилируется с этой библиотекой, вам нужно решить, что делать во время выполнения / сделать сам код универсальным, чего я добился с помощью isPlatformBrowser(this.platformId) в загрузчике SDK Google Maps load() функция, чтобы просто пропустить инъекцию. Он подходит для нашего текущего варианта использования, но для отключения этой библиотеки на стороне сервера может потребоваться большая часть мер безопасности (поскольку SDK Google Maps все равно там не запускается).

В любом случае, PR находится на https://github.com/SebastianM/angular-google-maps/pull/1554 , комментарии приветствуются. У меня есть вилка, работающая на @ laurentgoudet / agm-core, которую я успешно использую для своего проекта (пока этот PR не будет объединен). Я использую Angular CLI, но он должен работать с любым конструктором - отзывы приветствуются.

После множества попыток решение, предоставленное @AnthonyNa, позволило мне развернуть универсальное приложение как функцию firebase :).
Мое предложение - проверить, эффективно ли ts файлы преобразованы в js, если да, то ошибка импорта / экспорта не должна появляться.

Изменить (26/12/2018)
Я снова сталкиваюсь с проблемой с шикарным модулем информационного окна. В итоге я обнаружил, что babel не работал, когда я использовал развертывание firebase (помните, что при развертывании AU в качестве функции firebase выполняется установка npm, что означает, что пакет будет снова установлен как файлы ts). В конце концов, я просто раздвоил библиотеку (https://github.com/jota12x/angular-google-maps), применил babel и установил его из репо. Задача решена. (Жду исправления в основном репо).

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Есть какие-нибудь действия по этому поводу? Исправить довольно просто - достаточно начать использовать @angular-devkit/build-angular . Это одна из самых серьезных проблем, потому что у людей есть 2 выхода:
1) Используйте настраиваемые конфигурации веб-пакетов
2) Используйте некоторые хаки

и начать использовать @ angular-devkit / build-angular довольно просто и может сэкономить часы взлома

@AnthonyNahas

_Обновил решение до последней версии babel_

@philippeboyd @dkmostafa недавно я решил ту же проблему для этого модуля и других, таких как -> ngx translate и многое другое ...

решение (скомпилируйте файлы js в es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. добавьте это в корневой проект под именем .babelrc или добавьте пресеты напрямую через cli
   { "presets": ["@babel/preset-env"] }
3. добавить сценарий npm в package.json в области "scrtipsts"
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. добавить сценарий postinstall в package.json в области "scrtipsts"
   "postinstall": "npm run compile_@agm_core",
5. запустите npm i чтобы установить deps. После установки deps будет запущен скрипт postinstall, и babel скомпилирует целевые файлы js.
6. запустить свой сервер и должен мир
7. Дайте мне отзыв, если он работает. Я сделал то же самое для более чем 3 модулей npm, которые работают на моей машине: D

Большое спасибо, он все еще работает над Angular 7

Но это хак ... Или обходной путь ...

Во вторник, 2 апреля 2019 г., 12:53 PEA [email protected] написал:

@AnthonyNahas https://github.com/AnthonyNahas

Обновил решение до последней версии babel

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa, я недавно решил ту же проблему для этого
модуль и другие подобные -> ngx translate и многое другое ...

решение (скомпилируйте файлы js в es2015):

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. добавьте это в корневой проект под именем .babelrc или добавьте
   пресеты напрямую через cli
   {"пресеты": ["@ babel / preset-env"]}
3. добавить сценарий npm в package.json в области "scrtipsts"
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. добавить сценарий postinstall в package.json в области "scrtipsts"
   "postinstall": "npm run compile_ @ agm_core ",
5. запустите npm i, чтобы установить deps. После установки deps
   скрипт postinstall запустится, и 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. Лично у меня 0 опыта и знаний в универсальном и AoT.

Хорошо, я использовал PR ng-packagr, так что, возможно, теперь это сработает. Можете ли вы попробовать разветвить master и посмотреть, работает ли он?

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Привет @ doom777
Подскажите, пожалуйста, когда вы планируете выпустить это слияние? Я бы с радостью сбросил свою пропатченную версию этой библиотеки :)

Не до меня