web-dev-qa-db-ja.com

Uncaught TypeError：Object（...）is not a function Angular Google mapsを使用する場合

プロジェクトでagmを使用して、フォームフィールドを自動的に競合させようとしています。コマンドnpm install @agm/coreを使用してインストールしたばかりで、app.moduleにAgmCoreModuleをインポートに追加しました。 agmに関連するコードを使用せず、プロジェクトを保存してng serveを実行し、このエラーが発生しました。

agm-core.js:4538 Uncaught TypeError: Object(...) is not a function
at agm-core.js:4538
at Module.../../node_modules/@agm/core/fesm5/agm-core.js (agm-core.js:4544)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap:78)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:78)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:78)
at checkDeferredModules (bootstrap:45)

これが何を意味するのか分かりません。何が問題なのか教えてください。これが私のpackage.jsonファイルの依存関係とdevの依存関係です。

  "dependencies": {
"@angular-material-extensions/google-maps-autocomplete": "^2.0.0",
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.2.0",
"@angular/material-moment-adapter": "^8.2.3",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"and": "0.0.3",
"angular-mgl-timeline": "^0.3.2",
"angular2-text-mask": "^9.0.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ngx-bootstrap": "^5.2.0",
"ngx-pagination": "^4.1.0",
"ngx-toastr": "^10.2.0",
"rxjs": "^6.5.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"},
 "devDependencies": {
"@angular-devkit/build-angular": "~0.12.0",
"@angular/cli": "^7.2.1",
"@angular/compiler": "^7.2.15",
"@angular/compiler-cli": "^7.2.0",
"@angular/language-service": "~7.2.0",
"@types/googlemaps": "^3.38.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.13.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"TypeScript": "~3.2.2"}

インポートを削除するとすべてが正常に機能しますが、もう一度エラーを追加すると、プロジェクトの実行が停止します。

angulargoogle-mapsangular-material
3
Osaf
// Edit your app.module.ts
import { AgmCoreModule } from '@agm/core'
@NgModule({
  declarations: [],
  // Add this also
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'your key',
      libraries: ['places'] 
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
2
Amit Kumar

またはAgmバージョンを次のように変更します

現在のバージョンを削除します。

npm uninstall @ agm/core

次に、このバージョンをインストールします。

npm i @ agm/core @ 1.0.0-beta.7 --save

12
Amit Kumar

AGMモジュールのバージョン1.1.0が昨日リリースされ、Angular 8を使用していると思います。Angular 7を使用するには、1.0.0に戻す必要がありました。

5
NerdyB

私はangular 7で開発していて、アプリでagmモジュールを使用していますが、誤ってagmコアモジュールを再インストールします。インストールが完了すると、同じエラーが発生しました。agmバージョン "^ 1.1.0"はangular 7.と互換性がありません。@ package.jsonで、@ agm/core： "^ 1.1.0"から "1.0.0"だけを修正しました。

2
Muhammad hamed Kamal

またはAgmバージョンをに変更します

現在のバージョンを削除します。

npm uninstall @agm/core

次に、このバージョンをインストールします。

npm i @agm/[email protected] --save

それは私にとって完璧です

0
Hoàng Huỳnh Nhật
// import the core module
import { AgmCoreModule } from '@agm/core'


// add it to your app.module's imports like so
AgmCoreModule.forRoot({
      apiKey: 'your key',
      libraries: ['places'] 
}),
0
Hoff