Uncaught TypeError: Object(...) is not a function When using Angular Google maps

Question

I'm trying using agm for my project to auto compete the form fields. I just installed using the command npm install @agm/core and in app.module i added the AgmCoreModule in imports. i didn't use any code related to agm, saved the project and ran ng serve and getting this error.

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)

I have no idea what this means.Please tell me what's the problem. Here is my package.json file dependencies and dev dependencies.

  "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"}

Everything works fine if i remove the import but if i add again error stop the project from running.

Solution 1

// 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]
})

Solution 2

Or Change your Agm Version to

remove your current version:

npm uninstall @agm/core

then install this version:

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

Solution 3

Version 1.1.0 of AGM module was released yesterday and I believe it uses Angular 8. We had to revert back to 1.0.0 to jive with Angular 7.

Solution 4

I am developing in angular 7 and using agm module in app. by mistake i just reinstall agm core module. when installation was complete it gave me same error. agm version "^1.1.0" is not compatible with angular 7. fix was i did just @agm/core:"^1.1.0" to "1.0.0" in package.json

Solution 5

Or Change your Agm Version to

remove your current version:

npm uninstall @agm/core

then install this version:

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

That's perfect for me

View more solutions