Angular-google-maps: المجموعات تكسر التطبيق العام

lazarljubenovic ، نعم ، سيكون التغليف حلاً جيدًا في الوقت الحالي.
ccjigfox

وسوف ننظر في هذا

lazarljubenovic ليس لدي أي خبرة في التطبيقات العامة ، ولست متأكدًا من كيفية استخدام isPlatformBrowser بشكل صحيح ، فهل ستتمكن من إعطائي بعض المؤشرات؟

تضمين التغريدة يمكنك حقن الرمز المميز PLATFORM_ID في أحد المكونات ، مثل:

constructor(@Inject(PLATFORM_ID) private platformId: any) {
}

ثم يمكنك استخدام وظائف Angular مثل isPlatformBrowser أو isPlatformServer لتشغيل أجزاء معينة من التعليمات البرمجية بشروط فقط على أنظمة أساسية معينة.

constructor(@Inject(PLATFORM_ID) private platformId: any) {
  if (isPlatformBrowser(this.platformId)) {
    console.log('This code runs only in browser')
  }
}

لست متأكدًا من مكان وضع هذا ، فالمكالمة إلى window في الكود المقدم من js-marker-Clusterer:

markerclusterer.js # L698 و markerclusterer.js # L1270 لذا يجب تغليف مدير الكتلة # L3 ؟

ربما يكون من الضروري تعطيل المكوِّن الإضافي للكتلة بالكامل على الأنظمة الأساسية غير الخاصة بالمتصفح؟ ولكن ربما يمكن أن تساعد إعادة كتابة markerclusterer.js ، لأنه يمكن إعادة كتابتها بدون مرجع window

آه ، إنه رمز من طرف ثالث ليب. جيز. أتساءل عما إذا كان مجرد قول شيء مثل هذا سيساعد:

const oldWindow = window || {}
window = {
  setTimeout: oldWindow.setTimeout
}
import 'js-marker-clusterer'
window = oldWindow

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

هل يمكننا عمل import ليس في بداية الملف ، ولكن داخل أحد المكونات؟ ماذا سيفعل ذلك حتى؟

بالمناسبة ، مكتوب على خريطة جوجل ريبو هذا:

يرجى ملاحظة: هذا المستودع لا يتم صيانته حاليًا ، ويتم الاحتفاظ به للأغراض التاريخية فقط.

إذن ماذا عن مجرد تفرع ذلك من تلقاء أنفسنا؟ نظرًا لأنه إعادة شراء تاريخية ، فلن يتغير أبدًا مما يعني أنه لا توجد مشكلة فقط في استخدام نسختنا المعدلة التي لا تستخدم window على الإطلاق؟

أوه ، وفيما يتعلق بهذا:

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

يبدو هذا أساسيًا جدًا ولكني تعلمت هذا قبل أيام قليلة فقط:

إذا حاولت القيام بـ if (window == null) أو ما شابه و window غير موجود كمتغير في أي نطاق تمت زيارته ، فإن الكود سينقطع بـ ReferenceError . ومع ذلك ، إذا قمت بإجراء if (typeof window == 'undefined' ) ، فستعمل بشكل جيد وتعطي النتائج المتوقعة حتى لو لم يتم الإعلان عن window (وهي مشكلتنا على الخادم).

أعتقد أنه يمكنني محاولة اللعب وإصدار نسختنا الخاصة من Cluster repo ومعرفة ما يمكن فعله باستخدام هذا.

حاولت إصلاح هذا باستخدام الطريقة التالية:

http://ideasintosoftware.com/typescript-conditional-imports/

لكن لم يحالفني الحظ ، حيث سيبدأ مترجم AOT في الشكوى من أنه لم يعد من الممكن العثور على التوجيه.

نعم ، يقوم مترجم AOT بتحليل الشفرة بشكل ثابت وبالتالي عمليات الاستيراد الديناميكية
يبدو أكيدًا كشيء لا يمكن القيام به في Angular.

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

في 27 كانون الأول (ديسمبر) 2017 ، الساعة 18:06 ، كتب "cmddavid" [email protected] :

حاولت إصلاح هذا باستخدام الطريقة التالية:

http://ideasintosoftware.com/typescript-conditional-imports/

لكن لم يحالفني الحظ ، حيث سيبدأ مترجم AOT في الشكوى من التعليمات
لم يعد يتم العثور عليها.

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

ليس بعد ، قد أجربها لاحقًا هذا الأسبوع. لست من المعجبين بتغيير مصدر الريبو ، على الرغم من عدم صيانته في هذه اللحظة ، فقد يكون ذلك لاحقًا. لكن أعتقد أنه ليس لدينا أي خيار آخر. يعجبني اقتراح إزالة مراجع النوافذ تمامًا ، إذا كان ذلك ممكنًا فسيكون ذلك رائعًا.

حسنًا ، لقد مر عامان منذ آخر تحديث لذلك أعتقد ذلك
التشعب في هذه الحالة بالذات ، على الأقل كحل مؤقت ،
لن يكون سيئا للغاية.

في الخميس ، 28 ديسمبر 2017 الساعة 1:04 صباحًا ، كتب cmddavid [email protected] :

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

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

لقد تفرع عن مشروع js-marker-clusterer وقمت بالإصلاح. يمنع التهيئة MarkerClusterer عندما لا يتم تعريف النافذة (في العرض من جانب الخادم). لذا فإن مجموعة العلامات تعمل بشكل صحيح في كلتا الحالتين الآن.

تم نشره في npm. https://www.npmjs.com/package/js-marker-clusterer-universal

يجب استبدال التبعية js-marker-clusterer بـ js-marker-clusterer-universal لتصبح سارية المفعول.

mbrezovsky عمل رائع ، إنه يعمل جيدًا بالنسبة لي. لقد تلقيت خطأً واحدًا يتعلق بـ @agm/js-marker-clusterer باستخدام الواردات ، وهو شيء غير مسموح به حتى الآن على جانب Node.js / Firebase ، لذلك اضطررت إلى تحويل الكود إلى ES2015 باستخدام حل أنتوني نحاس المقترح هنا: https: //github.com/SebastianM/angular-google-maps/issues/1052#issuecomment -331150772

أي تحديثات بشأن هذه المسألة؟

AoschkA ما زلت أستخدم الحل البديل كما هو مذكور في تعليقي السابق. يمكنك العثور على المثال الخاص بي هنا: https://github.com/cmddavid/js-marker-clusterer.git

cmddavid يشرح التمهيدي الخاص بك فقط كيفية تثبيت agm / js-marker-clusterer. كيف يمكن دمج هذا في مشاريعنا الخاصة؟

AoschkA ، الريبو هو مجرد إخراج أقم بأي تعليمات ، يمكنك إضافته إلى الحزمة الخاصة بك.

"@agm/js-marker-clusterer": "git+https://github.com/cmddavid/js-marker-clusterer.git"

عند تثبيته ، سيكون لديك js-marker-clusterer بدون نافذة هي أخطاء غير محددة ، ويتم تجميعها إلى ES2015 بحيث تكون متوافقة مع خدمات مثل Firebase.

Thx الذي يعمل. سيكون من الرائع إذا أمكن تنفيذ ذلك في AGM بالرغم من ذلك. لكني أقدر الحل cmddavid !

cmddavid لقد صنعت كما قلت ، لكن هناك خطأ ERROR في ./node_modules/@agm/js-marker-clusterer/services/managers/cluster-manager.js
لم يتم العثور على الوحدة النمطية: خطأ: لا يمكن حل 'js-marker-clusterer-universal' في '. \ node_modules \ @ agmjs-marker-clusterer \ services \ manager'

maksimbykov هل يمكنك تأكيد وجود js-marker-clusterer-universal في مجلد node_modules الخاص بك؟ ربما لم يتم تثبيته بالكامل ، فقط في حالة تشغيل npm i --save js-marker-clusterer-universal . يبدو أيضًا أن هناك شيئًا غريبًا يحدث مع مسارات الملفات هناك. الأول يحتوي على شرطة مائلة مزدوجة // والثاني يفتقد شرطة مائلة للخلف \ بين node_modules و @agm .

تجدر الإشارة أيضًا إلى أنني لم أتحقق مما إذا كانت الحزمة لا تزال تعمل مع الزاوية 6.

cmddavid شكرا جزيلا لك! ربما كنت متعبة بالأمس وغافل

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

"@ agm / js-marker-clusterer": "git + https://github.com/cmddavid/js-marker-clusterer.git " آسف لكنه لا يعمل (لا تقم بتثبيت أي شيء)

لقد تفرع عن مشروع js-marker-clusterer وقمت بالإصلاح. يمنع التهيئة MarkerClusterer عندما لا يتم تعريف النافذة (في العرض من جانب الخادم). لذا فإن مجموعة العلامات تعمل بشكل صحيح في كلتا الحالتين الآن.

تم نشره في npm. https://www.npmjs.com/package/js-marker-clusterer-universal

يجب استبدال التبعية js-marker-clusterer بـ js-marker-clusterer-universal لتصبح سارية المفعول.

شكرا جزيلا يا رجل ، لقد أنقذتني للتو ... مجد :)

ما زلت أعاني من هذه المشكلة ، لماذا تم وضع علامة مغلق ؟؟

لقد قمت حرفيا بالتخفيض في التصويت على تفسير سبب إغلاقه. لقد رأيت سبب إغلاقها.

lazarljubenovic سننتقل إلى https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus على أي حال

لقد قمت حرفيا بالتخفيض في التصويت على تفسير سبب إغلاقه. لقد رأيت سبب إغلاقها.

والآن يمكننا إعادة فتحه: راقصة:

على أي حال ليس من الأسهل استيراد js-marker-clusterer داخل المكتبة وإنشاء وحدة قابلة للتصدير؟

فعلت هذا لي:

https://github.com/alexnoise79/js-marker-clusterer (انظر src / markerclusterer.js)

وبعد ذلك:
node_modules/@agm/js-marker-clusterer/fesm2015/agm-js-marker-clusterer.js

لقد استبدلت إعلان Markerclusterer بـ:

استيراد * كـ MarkerClusterer من 'js-marker-clusterer' ؛

يعمل ويجمع ssr 100٪

قاعدة الحل الخاصة بي على تعليق mbrezovsky أعلاه - لذلك

• قم بتثبيت حزمة npm الخاصة به https://www.npmjs.com/package/js-marker-clusterer-universal (أو اصنع شوكة خاصة ...)
• قم ببعض الأوامر في package.json

"install:clusterer-universal": "npm i js-marker-clusterer-universal && rm -rf node_modules/js-marker-clusterer && mv node_modules/js-marker-clusterer-universal node_modules/js-marker-clusterer",
"postbuild": "npm run install:clusterer-universal"

وسيتم تثبيته واستبداله بعد كل شيء.
ويعمل SSR! :)