Can't resolve parameters when using MapsAPILoader - Angular

Question

I'm trying to implement the autocomplete using Angular 8 following the tutorial listed below. I have implemented this geolocator autocomplete several times in different versions of Angular, but today on Angular 8 I get the error:

Can't resolve parameters when using MapsAPILoader

Tutorial

https://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

My Code:

import { ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { } from 'googlemaps';
import { MapsAPILoader } from '@agm/core';

export class App implements OnInit {
  ...
  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {}

If I remove this line:

private mapsAPILoader: MapsAPILoader

error goes away

Answer 1

Just took a look at the tutorial. If you just copied the code from App class then it won't work. You need to add the component decorator:

@Component({
  selector: 'my-app',
  styles: [`
    agm-map {
      height: 300px;
    }
  `],
  template: `
    <div class="container">
      <h1>Angular 2 + Google Maps Places Autocomplete</h1>
      <div class="form-group">
        <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
      </div>
      <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
      </agm-map>
    </div>
  `
})
export class App implements OnInit {}