angular-google-maps: Failed to display maps in page. ERROR TypeError: Object(...) is not a function

I followed exactly steps in Getting Started, however I got error during page load and the maps cannot be load.

Steps to reproduce

Install agm core module through terminal npm install @agm/core --save

Include AgmCoreModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot({
          apiKey : 'my_api_key'
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add <agm-map /> component in my html

<agm-map [latitude]="latitude" [longitude]="longitude">
</agm-map>

Add height to <agm-map /> component in my app.component.scss
```
agm-map {
    height : 600px;
}
```

Add latitude and longitude property in app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    latitude: number = 51.678418;
    longitude: number = 7.809007;

    constructor(){}

}

Run the application using ng serve command

Open http://localhost:4200 in my browser just to see blank page with below’s error in developer console.

ERROR TypeError: Object(...) is not a function
at new FitBoundsService (fit-bounds.js:31)
at createClass (core.js:12481)
at _createProviderInstance (core.js:12458)
at createProviderInstance (core.js:12299)
at createViewNodes (core.js:13771)
at callViewAction (core.js:14218)
at execComponentViewsAction (core.js:14127)
at createViewNodes (core.js:13812)
at createRootView (core.js:13673)
at callWithDebugContext (core.js:15098)

Expected/desired behavior I want to display a map without any marker in it.

angular2 & angular-google-maps version

Angular CLI: 1.6.8
Node: 9.5.0
OS: linux x64
Angular: 5.2.11
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

AGM Version : @agm/core@1.0.0-beta.5

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 22

Commits related to this issue

fix agm https://github.com/SebastianM/angular-google-maps/issues/1511 — committed to entrecode/ec.components by felixroos 6 years ago

Most upvoted comments

Since you are creating Angular: 5 application :

Angular: 5.2.11

RxJS 5.x package is installed with it.

But starting from @agm/core@1.0.0-beta.4 the library has a dependency to RxJS 6.x, that’s the reason why this error occurs.

So, the solution would to update RxJS from from 5.x to 6.x:

npm uninstall rxjs
npm install rxjs@6 rxjs-compat@6 --save

+29

vgrem on Oct 10, 2018

Yes i used "@agm/core": "1.0.0-beta.3" and now it works.

gtzinos on Feb 28, 2019

We also experienced the same error. Previously had “@agm/core”: “^1.0.0-beta.2” which was installing “@agm/core @1.0.0-beta.3” but recently has been installing “@agm/core @1.0.0-beta.5”. Which broke our site. Changing the package.json to specify exact version is our workaround for now. “@agm/core”: “1.0.0-beta.3”.

monigala on Oct 4, 2018

I think you used the dependency in package.json like this : "@agm/core": "^1.0.0-beta.2" When you use ^ … npm will optimize your dependency, trying to keep the package up-to-date until this package is compatible with the others… but in this case the npm thinks wrong

I used this syntax and the npm installed the beta.5 … You can check this if u search the agm folder in node_modules and open the agm’s package.json… there is a “version” key for it.

If I delete the ^ before the version number I force the npm to use this version and this solved my problem.

I hope it helps.

zsoltuveges on Feb 27, 2019

Thank you @vgrem your solution is great, very fine

npm uninstall rxjs
npm install rxjs@6 rxjs-compat@6 --save

it’s work very wel for me.

joker7blue on Jan 14, 2019

@vgrem I was facing the same issue. Yours reply worked for me. Thanx much

Suhailattatras on Oct 12, 2018

Since you are creating Angular: 5 application :

Angular: 5.2.11

RxJS 5.x package is installed with it.

But starting from @agm/core@1.0.0-beta.4 the library has a dependency to RxJS 6.x, that’s the reason why this error occurs.

So, the solution would to update RxJS from from 5.x to 6.x:
npm uninstall rxjs
npm install rxjs@6 rxjs-compat@6 --save

Thank you !!!

pierrephilippe on Jan 25, 2019

@vgrem Thanks !!!

AbrahamGarcia240 on Jan 2, 2019

@vgrem Thank you, work for me.

marvinajcuc on Oct 26, 2018

@vgrem work for me

AhmadSayadi on Oct 18, 2018

Work for me also. Thank you.

mtimoleon on May 3, 2019

may be, you have a syntax error. check your code very well

RROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected.

i’m seeing that << ‘;’ expected. >>, check your syntax because Angular like soft code.

if the Error persist, tell me again

Le ven. 8 févr. 2019 à 13:18, Alessandro Oliveira Silva < notifications@github.com> a écrit :

Didn’t work for me. I installed rxjs@6 and rxjs-compat@6, but now I have more errors in console:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected. node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ‘;’ expected. node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

I have @agm/core 1.0.0-beta.5 and @angular/core 5.2.11

Help!

Same here!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SebastianM/angular-google-maps/issues/1511#issuecomment-461785390, or mute the thread https://github.com/notifications/unsubscribe-auth/AsaAFcrrjl40kD5DQkAsAU1hciR5kbjIks5vLWsLgaJpZM4W8OOM .

joker7blue on Feb 9, 2019