Angular-google-maps: Lazy-maps-api-loaderエラー

彼は@ravindranpandu 、

ページのどこかに自分でグーグルマップスクリプトをロードしますか？

いいえ、typescriptファイルにインポートするだけです。そのページにアクセスするたびに、googlemapapiにリンクするhtmlにスクリプトタグが追加されます。

上の添付画像では、googlemapスクリプトタグが7回追加されていることがわかります。これは、このページに7回アクセスしたことを意味します。

@ravindranpanduうーん、 bootstrap()関数を見せてくれませんか。

こんにちは@SebastianM 、

サンプルアプリを簡単に作成できるように、そのイオンアプリで問題を確認できます。
https://github.com/ravindranpandu/angular-map

前もって感謝します

マップページに複数回アクセスしてみてください。私が話していた問題が発生します。

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

なぜこれが起こっているのかわかりません。何が悪いのか教えてください。

ありがとう

@ravindranpanduこの行が理由です：
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

この場所にANGULAR2_GOOGLE_MAPS_PROVIDERSを含めると、マップローダーの複数のインスタンスが作成されます。

bootstrap（）メソッドでANGULAR2_GOOGLE_MAPS_PROVIDERSを使用する必要があります。

@SebastianMメインのapp.tsプロバイダーでANGULAR2_GOOGLE_MAPS_PROVIDERSを初期化しました。お時間をいただき、ありがとうございました。

これは、ルートアプリモジュールの代わりに機能モジュールでangular2-google-mapsを使用した場合にも発生するようです。 誰でも確認できますか？

app.module.tsインポートに以下を追加します。

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

（もちろん、ライブラリを削除できます：['places']）

次に、共有モジュールに以下を追加します。
輸入品
AgmCoreModule
および輸出：
AgmCoreModule

そうして
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. はなくなります

皆さん、遅延読み込みをどのように処理するか知っている人はいますか？
GOOGLE_MAPS_PROVIDERSは非推奨になり、代わりにAgmCoreModuleを使用します。これは、モジュールが読み込まれるたびにAPIライブラリが読み込まれます。

@szykov遅延ロードされたサブモジュールでこのangular2コンポーネントを使用するための解決策は、 @ efstathiosntonasが言ったことを実行すること

まず、メインのapp.module.tsに、APIを含めます

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

次に、サブモジュール内に、APIキーなしで再度インクルードします。

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

これで、angular2 mapsコンポーネントを遅延ロードし、JavaScriptを1回だけ要求します。 私はwebpack2を使用してこれを行いましたが、正常に動作します。 ここで良い仕事をしてくれてありがとう。

@IAMtheIAMありがとう。 @efstathiosntonasへの挨拶も🥇

インデックスファイルのどこかまたは別の場所で再度呼び出す場合は、削除する必要があります。
プロジェクトで一度だけ呼び出す必要があります。

こんにちは、みんな、私が2回目に地図を含めた場所を見つける方法を知っている人はいますか？
私が最初に訪れたページに地図がある場合、それを見ることができません。 しかし、私が最初に訪れた地図のあるページが最初ではない場合、それは大丈夫です。
ありがとう

コードサンプルがないと、 @ Riasetsを支援するのは困難です

リポジトリリンク： https ：
くだらないコードでごめんなさい
@IAMtheIAM

ログイン： [email protected]
パスワード：test1234

@Riasetsアプリのクローンを作成して実行しましたが、とても良さそうです。 私の場合、ログイン後すぐにマップが読み込まれ、他のページに変更すると、マップも正常に読み込まれます。 問題はありませんが、詳しく説明していただけますか？

@IAMtheIAMログインページが最初で、マップページが2番目でした。 この場合、マップがロードされます。 ただし、すでに承認して/ホームページに移動しようとすると、マップは読み込まれません。 または、マップを使用してページをリロードしてみてください。ロードも行われません。 また、開発ツール2でグーグルマップと同じスクリプトを見ることができます