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

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

2. 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 { }
   

3. Add <agm-map /> component in my html

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

4. Add height to <agm-map /> component in my app.component.scss

   agm-map {
       height : 600px;
   }
   

5. 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(){}
   
   }
   

6. Run the application using ng serve command

7. 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

[vgrem]

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

[gtzinos]

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