Angular-google-maps: 클러스터가 범용 앱을 깨고 있습니다.

@lazarljubenovic 예 랩핑이 현재로서는 좋은 솔루션이 될 것입니다.
cc @jigfox

나는 이것을 조사할 것이다

@lazarljubenovic 저는 범용 앱에 대한 경험이 없고 isPlatformBrowser 올바르게 사용하는 방법을 잘 모르겠습니다. 조언을 좀 주시겠습니까?

@jigfox 물론입니다! 다음과 같이 PLATFORM_ID 토큰을 구성 요소에 주입할 수 있습니다.

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

그런 다음 isPlatformBrowser 또는 isPlatformServer 와 같은 Angular 함수 를 사용하여 특정 플랫폼에서만 특정 코드를 조건부로 실행할 수 있습니다.

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 따라서 cluster-manager.ts#L3 을 래핑해야 합니까?

브라우저 플랫폼이 아닌 경우 전체 클러스터 플러그인을 비활성화해야 합니까? 하지만 window 참조 없이 다시 작성할 수 있기 때문에 markerclusterer.js 다시 작성이 도움이 될 수 있습니다.

아, 타사 lib의 코드입니다. 이런. 다음과 같은 말을 하는 것이 도움이 되는지 궁금합니다.

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

그러나 변수가 인스턴스화되지 않았기 때문에 서버가 코드를 실행하는 동안 window 를 찾는 것에서 중단될 것이라고 생각합니다. 따라서 좋은 생각일지라도 그것도 중단될 것입니다.

import 파일의 시작 부분이 아니라 구성 요소 내부에서 수행할 수 있습니까? 그게 무슨 소용이겠습니까?

그건 그렇고, 그 Google지도 저장소에 다음과 같이 말합니다.

참고: 이 리포지토리는 현재 유지 관리되지 않으며 역사적 목적으로만 보관됩니다.

그렇다면 우리 스스로 그것을 포크하는 것은 어떻습니까? 그것은 역사적인 repo이기 때문에 window 를 전혀 사용하지 않는 자체 조정 버전을 사용하는 것만으로도 문제가 없다는 것을 의미하는 변경되지 않습니다.

아, 그리고 이것에 관해서:

그러나 변수가 인스턴스화되지 않았으므로 서버가 코드를 실행하는 동안 창을 찾는 것에서 중단될 것이라고 생각합니다. 따라서 좋은 생각일지라도 그것도 중단될 것입니다.

이것은 매우 기본적인 것처럼 보이지만 나는 이것을 며칠 전에 배웠습니다.

if (window == null) 또는 이와 유사한 작업을 시도하고 window 가 방문한 범위에 변수로 존재하지 않으면 코드가 ReferenceError 중단됩니다. 그러나 if (typeof window == 'undefined' 를 수행하면 window 가 선언된 적이 없는 경우에도 완벽하게 작동하고 예상한 결과를 제공합니다(이는 서버 문제임).

클러스터 리포지토리의 자체 버전을 가지고 놀고 이를 사용하여 수행할 수 있는 작업을 확인할 수 있습니다.

다음 접근 방식을 사용하여 이 문제를 해결하려고 했습니다.

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

그러나 AOT 컴파일러가 지시문을 더 이상 찾을 수 없다고 불평하기 시작할 것이기 때문에 운이 없었습니다.

예, AOT 컴파일러는 코드를 정적으로 분석하므로 동적 가져오기
확실히 Angular에서는 불가능한 것처럼 들립니다.

리포지토리를 분기하고 액세스 권한을 제거하는 데 시간이 있었습니까?
window ? 쉽게 할 수 있는 몇 군데에서만 사용되는 것 같습니다.
피한다.

2017년 12월 27일 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
.

아직까지는 아니지만 이번 주 후반에 시도해 볼 수 있습니다. 저는 소스 저장소를 변경하는 것을 좋아하지 않습니다. 비록 현재 유지되고 있지는 않지만 나중에 될 수도 있습니다. 하지만 우리에게는 다른 선택지가 없는 것 같아요. 가능하다면 창 참조를 완전히 제거하라는 제안이 마음에 듭니다.

글쎄요, 마지막 업데이트 이후로 2년이 지났으니 제가 생각하는 이유는
이 특별한 경우에 최소한 임시 해결책으로 분기합니다.
너무 나쁘지 않을 것입니다.

2017년 12월 28일 목요일 오전 1시 4분에 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 측에서 허용되지 않습니다. 그래서 Anthony Nahas가 여기에 제안한 솔루션을 사용하여 코드를 ES2015로 변환해야 했습니다. https: //github.com/SebastianM/angular-google-maps/issues/1052#issuecomment -331150772

이 문제에 대한 업데이트가 있습니까?

@AoschkA 이전 의견에서 언급한 해결 방법을 여전히 사용하고 있습니다. 여기에서 내 예를 찾을 수 있습니다. https://github.com/cmddavid/js-marker-clusterer.git

@cmddavid 귀하의 readme는 agm/js-marker-clusterer를 설치하는 방법을 설명합니다. 이것을 우리 자신의 프로젝트에 어떻게 통합합니까?

@AoschkA , repo는 컴파일된 출력일 뿐이며, 지시 사항이 없습니다. 다음과 같이 package.json에 추가할 수 있습니다.

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

설치하면 js-marker-clusterer without window is undefined 오류가 발생하고 ES2015로 컴파일되어 Firebase와 같은 서비스와 호환됩니다.

작동합니다. 이것이 AGM에서 구현될 수 있다면 좋을 것입니다. 그러나 솔루션 @cmddavid에 감사드립니다!

@cmddavid 말씀하신대로 만들었는데 ./node_modules/@agm/js-marker-clusterer/services/managers/cluster-manager.js에 오류가 있습니다.
모듈을 찾을 수 없음: 오류: '.\node_modules\@agmjs-marker-clusterer\services\managers'에서 'js-marker-clusterer-universal'을 확인할 수 없습니다.

@maksimbykov js-marker-clusterer-universal 이 node_modules 폴더에 있는지 확인할 수 있습니까? npm i --save js-marker-clusterer-universal 실행할 수 있는 경우를 대비하여 완전히 설치되지 않았을 수 있습니다. 또한 파일 경로에 이상한 일이 일어나고 있는 것 같습니다. 첫 번째 항목에는 이중 슬래시 // 있고 두 번째 항목에는 node_modules 와 @agm 사이에 백슬래시 \ 가 없습니다.

또한 패키지가 여전히 angular 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를 다음으로 대체했습니다.

'js-marker-clusterer'에서 *를 MarkerClusterer로 가져옵니다.

그것은 작동하고 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이 작동합니다! :)