Angular-google-maps: Angular 4 Universal - خطأ في بناء الجملة: تصدير رمز غير متوقع

مرحبًا ، كان علي أن أتعامل مع هذه المشكلة التي لا تمثل حقًا قضية Agm ولكنها مشكلة عالمية.
يتم تجميع معظم الحزم الحديثة ، بما في ذلك Agm في es6 ، مع الكلمات الرئيسية import و export .

لم تكن هذه مشكلة قبل Universal نظرًا لوجود ملف حزمة دائمًا في الحزم لنفترض أن System.js للتطوير المحلي وسيفهم Webpack / Rollup es6 لحزم الإنتاج.

ولكن مع Universal ، يمكنك استخدام الملفات الموجودة في node_modules مباشرة ، في es6 بعد ذلك ، ولا تعرف العقدة عن الرموز المميزة import و export حتى الآن.

يمكن القيام بأمرين ، يمكنك تجميع تطبيقك حتى بالنسبة إلى التطبيق العام ، لكنك ستفقد الكثير من وقت الترجمة لمجرد حزمة غير مجدية في سياق الخادم.

الخيار الآخر ، وهو الخيار الذي استخدمته في شركتي ، هو نسخ جميع مصادرك في مجلد tmp قبل تجميع وإنشاء مجلد node_modules في مجلد tmp هذا.
يمكنك بعد ذلك نسخ جميع مجلد agm (المجلد node_module "الحقيقي" في المجلد "الوهمي" في tmp. ستتمكن بعد ذلك من استخدام babel لتحويل ملفات es6 المنسوخة في مجلد node_modules الوهمي في Commonjs التي سيفهم nodejs. (عندما تطلب agm ، ستبحث العقدة عن الملف في مجلد node_modules الوهمي)

هذا أمر مزعج للغاية ولا توجد خيارات أخرى في الوقت الحالي (أخبرني إذا وجدت خيارًا أفضل). أعتقد حقًا أن الوحدات النمطية ng2 يجب أن تجد طريقة لتوفير كل من ملفات es6 و commonjs إذا كانوا يريدون أن تكون وحداتهم سهلة الاستخدام مع Universal :)

استخدم webpack.config

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

kkaabbaa هل يمكنك التأكد من أن هذا يعمل؟
ببساطة إضافته إلى حزمة الويب الخاصة بي لم تنجز المهمة.

لدي نفس المشكلة ، لدي بابل وقمت بعمل نسخة من المشروع في مجلد جديد ثم قمت بتثبيت برنامج Babel محليًا ولكني أود أن أفهم العملية التي يقوم بها Adrienboulle لشركته لأنه لا بد لي من الحصول على هذا شيء شكرا لكم مقدما.

لقد أضفته إلى webpack.config وهو يعمل بالنسبة لي.

العناصر الخارجية: [nodeExternals ({
القائمة البيضاء: [
/ ^ @ agm / core / ،
]
})] ،

لقد عملت مع حل بديل عن طريق التحميل الديناميكي لمكون يحتوي على خريطة agm الخاصة بي بناءً على ما إذا كان المتصفح أو الخادم: 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 ، لكنني لم

_تحديث الحل لأحدث إصدار بابل_

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. إضافة نص برمجي 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 ، سيتم تشغيل البرنامج النصي postinstall وسيقوم Babel بتجميع ملفات js المستهدفة

6. قم بتشغيل الخادم الخاص بك ويجب أن يكون العالم

7. أعطني ردود الفعل من فضلك إذا كان يعمل. فعلت نفس الرقيق لأكثر من 3 وحدات npm تعمل على جهازي: د

AnthonyNahas هذه فكرة شيقة جدا. كان يبدو جيدا جدا ليكون صحيحا! أنا إعطائها الذهاب

أي شخص لديه حل لهذا؟ فقط واجهت هذا مؤخرًا أيضًا.

adrienboulle شكرًا لشرح الأشياء ، الآن أتساءل:

AnthonyNahas حاولت ذلك. الآن يظهر خطأ آخر

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

AnthonyNahas ، شكرا جزيلا على الحل الخاص بك! لقد جربت العديد من الحلول الأخرى التي لم تنجح معي لمدة شهر تقريبًا! هذا في الواقع يحل مشكلتي =)

karthikeyanmanureva u يجب أن تفعل الشيء نفسه لوحدة npm antoher التي تلقي "خطأ في التركيب: استيراد رمز غير متوقع" ...
تضمين التغريدة

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

خطأ في تركيب الجملة: تصدير رمز غير متوقع

أي فكرة كيف يمكنني إصلاحها؟

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

lomboboo أضف
-> إضافة برنامج نصي 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 ، لكن ليس لدي أي فكرة عن كيفية إنجاحه.

تضمين التغريدة

على 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",

ملاحظة: إذا قمت بتشغيل برنامج نصي npm من المحطة ، فيمكنك استخدام babel بدلاً من node_modules/babel-cli/bin/babel.js . الآخر مفيد فقط عند تشغيل مهامك مباشرة من الجهاز وليس عبر npm ...

لقد قمت للتو بتقسيم هذا الريبو وسأقدم قريبًا حلاً أفضل لحل هذا النوع من الأخطاء ، مثل تصدير / استيراد رمز غير متوقع ... حتى يتمكن المطور من استخدام هذه الوحدة دون تحويل ملفات src يدويًا وتشغيل برنامج نصي مخصص npm ..

تضمين التغريدة

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 حتى يتمكن المرء من استخدامها مباشرة في package.json دون الحاجة إلى تثبيت babel وما إلى ذلك:

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

قد تكون مفيدة لأي شخص. أنا أستخدم استضافة Firebase ، ولسبب ما لا يبدو أن Firebase يقوم بتجميع الشفرة على الرغم من أنني أستخدم نفس الطريقة تمامًا كما وصفها أنتوني في package.json لـ Firebase لهذا السبب أستخدم هذا الحل.

cmddavid لقد واجهت هذه المشكلة على Firebase أيضًا. لن يعمل على Firebase لأنه يقوم بتثبيت وحدات العقدة مرة أخرى ولا يحتوي على babel-cli مثبتة على مستوى العالم.

dockleryxk ، فهل يعني هذا أن الحل الذي أقدمه هو الحل الوحيد

لا أفهم تمامًا سبب قيام Firebase بتثبيت جميع الوحدات مرة أخرى. أليست حزمة الخادم التي يتم إنشاؤها على العميل قبل النشر كافية؟ بقدر ما يمكنني معرفة أن نص العقدة الذي يتم تنفيذه بواسطة وظيفة Firebase لا يتطلب سوى مجموعة محدودة جدًا من حزم العقد. بالتأكيد ليست الحزمة @agm/core . نظرًا لأنه يتم بالفعل إرسال حزمة الخادم إلى الخادم أثناء النشر.

cmddavid من المحتمل أن يستغرق تحميل دليل وحدات العقدة وقتًا طويلاً قد يكون تخميني للسبب ، لكنني لا أعرف في الواقع. أنا شخصياً أضع الوحدات المترجمة في دليل داخل دليل الوظائف وأرجعها فقط من package.json في دليل الوظائف. على سبيل المثال "@agm/core": "file:./compiled_modules/@agm/core"

AnthonyNahas أنقذ يومي. كان يكافح للحصول على عرض Angular Universal Server Side وتشغيله لأسابيع الآن. الحل الخاص بك يعمل مثل السحر !!

AnthonyNahas ، agm ، بعد رؤية بناء جملة ES6 ، فكرت أولاً في التجميع باستخدام حزمة الويب التي تعتبر واحدة (على الأقل بالنسبة لي) ، على أي حال ، شكرًا مرة أخرى ، قم بالإعداد Angular Universl SSR وخير تمامًا الآن!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], بهذه المهمة نيابة عني. شكرا لك. وإلا فإن حل AnthonyNahas يجب أن يقوم بهذه المهمة.

واجهت نفس المشكلة مع إحدى الحزم الخاصة بي ، واتضح أن جعل الحزمة "Angular Package Format" متوافقة مع الحيلة. هذه حزمة npm مفيدة جدًا للمساعدة في ذلك: https://github.com/dherges/ng-packagr

إلى حد كبير التوصيل والتشغيل.

تضمين التغريدة هذا ايضا يعمل من اجلي
شكرا

هل ما زلتم يا رفاق تواجهون مشاكل مع هذا؟ أنا أستخدم هذه الوحدة في مشروع عالمي وكلها تعمل كملف خارج الصندوق. ما هي الإصدارات التي تستخدمها؟

مرحبًا AnthonyNahas ، لا يمكنني تشغيل هذا من أجل ng2-google-place-autocomplete

أحصل على رسالة الخطأ هذه:
`C: \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts: 6
تصدير * من "./src/index" ؛
^ ^ ^ ^ ^ ^

خطأ في تركيب الجملة: تصدير رمز غير متوقع
في 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)
عند الطلب (داخلي / module.js: 11: 18) `

ثم اتبعت خطواتك:

1. npm i - حفظ -ديف بابل- cli- بابل- إعداد مسبق- 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"،
"premart": "ng build --prod && ngc"،
"البدء": "ts-node src / server.ts" ،
"postinstall": "npm قم بتشغيل compile_ng2-google-place-autocomplete"
}

1. تشغيل npm أنا لتثبيت الأقسام. بعد تثبيت deps ، سيتم تشغيل البرنامج النصي postinstall وسيقوم Babel بتجميع ملفات js المستهدفة

2. قم بتشغيل بدء تشغيل npm

3. ما زلت أحصل على الخطأ نفس الخطأ.

إذا كنت تستطيع مساعدتي ، فسيكون ذلك مفيدًا حقًا لأنني قضيت ساعات في محاولة إصلاح هذا!

dockleryxk ، AnthonyNahas ، cmddavid طريقة أبسط وأسهل ...
إضافة الغزل تجميعها agm. بدون webpack و sytemjs nonsens ، اعمل في الزاوية 5 ^ + عام + ssr + استضافة / وظائف Firebase.

retrwood هذا رائع ، سيكون من الجيد أن يكون لديك إصدار NPM متاح أيضًا.

شكرا AnthonyNahas ،
لقد أنقذت يومي ، إنه عمل رائع حقًا ، حيث لم أكن أتفق مع أداة إخراج cli.

شكرا جزيلا لك.

AnthonyNahas babel-preset-es2015 مهملة الآن. كيف يمكننا التعامل مع هذه المشكلة؟

Gomathipriya شكرا على السؤال! أعطيتني الدافع لإرسال طلب سحب أخيرًا!

21.9.2017 ، لقد نشرت حلاً للتعامل مع هذا الخطأ! في ذلك الوقت ، لم أكن أعرف أن المكتبة تُنشئ كود الكتابة مثل الحزمة ، es5 ... كان لدي عدد كبير جدًا من المشاريع ولم أتمكن من العثور على الخطأ الحقيقي في @ agm / core ! حسنًا ، بالأمس كنت أقوم بتطوير امتدادات مادية زاوية للتطبيقات الزاوية التي تستخدم @ 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 الصحيح!

لقد أرسلت قبل ثوان قليلة طلب سحب!

يرجى دعم هذه العلاقات العامة بعد اختبار ذلك على جهازك!

أختبر هذا السيناريو التالي هنا في هذا المشروع @ angular-material-extensions / google-maps-autocomplete

إذا كنت تحب المشروع ، فالرجاء دعمني من خلال تمثيله ومشاركته!

شكرا لكم جميعا 👍 ❤️

أى اخبار ؟ تضمين التغريدة

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

أخبر ما إذا كانت الحيلة قد فعلت ذلك من أجلك!

AnthonyNahas نشهد نفس المشكلة مع حزمة مجموعة الخرائط أيضًا. محبط للغاية ، أقدر الوقت الذي تقضيه في العمل عليه. هل هناك حل مقترح يمكنني تنفيذه أثناء مراجعة العلاقات العامة؟

يمكنني إضافة هذا يدويًا لإجراء اختباراتنا ، لكنها ستظل تفشل في خط الأنابيب.

Gomathipriya لقد قمت للتو بتحديث الحل المنشور أعلاه إلى أحدث إصدار من babel v7.1.0 ، واختبرت العملية في npm mobule @ angular-material-extensions / google-maps-autocomplete

تحقق من حالة circleci هنا

وضع travis-ci هنا

mcblum ، ربما يجب عليك نفس الشيء مثل الوحدة الأساسية (انظر الحل المنشور أعلاه)

في صحتك 🍻

Agm رائع حقًا ومفيد ولكن لسوء الحظ لم أتمكن من المساعدة فيما يتعلق بالعلاقات العامة ، وربما كان ذلك معقدًا للغاية بالنسبة لي.

لذلك قررت تنفيذ رمز مخصص لواجهة برمجة تطبيقات جافا سكريبت لخرائط Google والتي تحولت إلى مكون ويب جديد يسمى خرائط جوجل على الويب والتي نشرتها اليوم واستخدمتها كبديل في مشروعي من أجل حل المشكلة.

مرة أخرى ، 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 لقد جربت الحل الخاص بك ولكن لا يزال الخطأ نفسه.
أحاول نشر حزمة الخوادم الخاصة بي في وظيفة Cloud Fire ...

بدون agm كل شيء على ما يرام / العمل ولكن مع agm حصلت على خطأ--

وظائف [ssr (us-central1)]: خطأ في النشر.
خطأ في تحميل الوظيفة: لا يمكن تحميل التعليمات البرمجية في ملف index.js.
هل هناك خطأ في بناء الجملة في التعليمات البرمجية الخاصة بك؟
تتبع المكدس المفصل: /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(وظيفة (الصادرات ، تتطلب ، وحدة ، __اسم الملف ، __اسم)
{import {Injectable، NgZone} من "@ angular / core" ؛
^ ^ ^ ^ ^ ^

خطأ في بناء الجملة: استيراد رمز غير متوقع
في 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)
عند الطلب (داخلي / module.js: 20:19)
في Object. @ agm / core / services / مديرين / Circle-manager (/user_code/dist/server/main.js:4999:18)

يرجى الرد

هذا يعني أن مترجم babel لم يقم بعمله لأنه كان سيحل محل الواردات. يجب أن يكون كلا المستودع متاحًا مجمّعًا مسبقًا في جيثب الخاص بي. يمكنك استخدام ذلك إذا كنت غير قادر على القيام بجزء بابل.

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 ، فإن أفضل الممارسات للمكتبات وفقًا لإرشادات تنسيق الحزمة الزاويّة هي أيضًا نشر وحدات ES الصديقة لـ AoT و metadata.json ملفات البيانات الوصفية ، والتي تقوم بها هذه الحزمة بالفعل. ومع ذلك ، نظرًا إلى https://github.com/angular/angular-cli/issues/7200 ، فشل إنشاء Angular Universal حاليًا (مع أخطاء SyntaxError: Unexpected token export -like) عند نشر المكتبة المذكورة كوحدات ES منفصلة بدلاً من ذلك من واحد مسطح (fesm) ، حيث ستحل عمليات الاستيراد العميقة بعد ذلك إلى وحدات ES مما يؤدي إلى فشل العقدة لأنها لا تفهم وحدات 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 الافتراضي "هذا كنوع غير محدد" (والذي وإن كان تحذيرًا ، فهو في الواقع السلوك المتوقع).

أخيرًا ، بعد أن أصبح الإصدار العالمي لتطبيقك يجمع مع هذه المكتبة ، تحتاج إلى تحديد ما يجب القيام به في وقت التشغيل / جعل الكود نفسه سهل الاستخدام ، وهو ما حققته باستخدام isPlatformBrowser(this.platformId) في محمل خرائط Google SDK load() وظيفة لتخطي الحقن. إنها خدعة لحالة الاستخدام الحالية لدينا ، ولكن قد تكون هناك حاجة إلى معظم الضمانات لتعطيل تلك المكتبة على جانب الخادم (نظرًا لأن Google Maps SDK لن يعمل هناك على أي حال).

على أي حال ، العلاقات العامة موجودة على https://github.com/SebastianM/angular-google-maps/pull/1554 ، نرحب بالتعليقات. لديّ مفترق يعمل على @ laurentgoudet / agm-core والذي أستخدمه بنجاح

بعد الكثير من المحاولات ، سمح لي الحل المقدم من AnthonyNahas بنشر تطبيق عالمي
اقتراحي هو التحقق مما إذا كانت ملفات ts قد تم تحويلها بشكل فعال إلى js ، إذا كانت كذلك ، فيجب ألا يظهر الخطأ المتعلق بالاستيراد / التصدير.

تحرير (26/12/2018)
أركض إلى المشكلة مرة أخرى مع وحدة نافذة المعلومات الأنيقة. انتهى بي الأمر باكتشاف أن babel لم تكن تعمل عندما كنت أستخدم نشر Firebase (تذكر أنه عند نشر AU كوظيفة Firebase ، يتم إجراء تثبيت npm ، مما يعني أن الحزمة سيتم تثبيتها مرة أخرى كملفات ts). في النهاية ، قمت للتو بتقسيم المكتبة (https://github.com/jota12x/angular-google-maps) ، وقم بتطبيق babel وتثبيته من الريبو. تم حل المشكلة. (في انتظار الإصلاح في الريبو الرئيسي).

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

أي نشاط على هذا؟ من السهل جدًا إصلاحه - ما عليك سوى البدء في استخدام @angular-devkit/build-angular . هذه واحدة من أخطر المشاكل لأن الناس لديهم طريقتان للخروج:
1) استخدم تكوينات حزمة الويب المخصصة
2) استخدم بعض الاختراقات

وبدء استخدام @ angular-devkit / build-angular بسيط للغاية ويمكن أن يوفر ساعات من القرصنة

تضمين التغريدة

_تحديث الحل لأحدث إصدار بابل_

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. إضافة نص برمجي 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 ، سيتم تشغيل البرنامج النصي postinstall وسيقوم Babel بتجميع ملفات js المستهدفة
6. قم بتشغيل الخادم الخاص بك ويجب أن يكون العالم
7. أعطني ردود الفعل من فضلك إذا كان يعمل. فعلت نفس الرقيق لأكثر من 3 وحدات npm تعمل على جهازي: د

شكرًا جزيلاً ، لا يزال يعمل على Angular 7

لكن هذا اختراق ... أو حل بديل ...

في الثلاثاء ، 2 أبريل ، 2019 ، 12:53 مساءً ، كتب PEA [email protected] :

AnthonyNahas https://github.com/AnthonyNahas

تحديث الحل لأحدث إصدار من بابل

filippeboyd https://github.com/philippeboyd dkmostafa
https://github.com/dkmostafa لقد قمت بحل المشكلة نفسها مؤخرًا لهذا الغرض
الوحدة النمطية وغيرها مثل -> ترجمة ngx والمزيد ...

الحل (تجميع ملفات js في es2015):

1. تثبيت npm - 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 أنا لتثبيت الأقسام. بعد تثبيت الأقسام ، تم إنشاء ملف
   سيتم تشغيل البرنامج النصي postinstall وسيقوم Babel بتجميع ملفات js المستهدفة
6. قم بتشغيل الخادم الخاص بك ويجب أن يكون العالم
7. أعطني ردود الفعل من فضلك إذا كان يعمل. لقد فعلت نفس الشيء لمزيد من التفاصيل
   من 3 وحدات npm تعمل على جهازي: د

شكرًا جزيلاً ، لا يزال يعمل على 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.

حسنًا ، لقد قمت بسحب العلاقات العامة في ng-packagr ، لذا ربما ستنجح الآن. هل يمكنك محاولة تفرع السيد ومعرفة ما إذا كان يعمل؟

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

مرحبا @ doom777
هل يمكنك إخباري ، عندما تخطط لإصدار هذا الدمج؟ أرغب في ترك الإصدار المصحح من هذه المكتبة :)

ليس الأمر متروكًا لي