Skip to content

Angular Google Maps. "App-routing.module.ts" affecting other components in a weird way.

I am using google maps API in my Angular application. I recreated the whole project (ng new ___) and copy pasted all of the code in the new folder. The reasoning for making a new project was to remove unecessary installs and also add app-routing.module from the beginning in (ng new ___).

I had some variables: latitude, longitude, zoom-level and styles for my Map.

export class AppComponent {
  title = 'PlaceQuizzer';
  latitude = 58.378418;
  longitude = 15.809007;
  zoom = 10;
  styles = [
        {
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#ebe3cd"
        }
      ]
    },
    ...

And I was calling it from app.component.html looking like this

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" [styles]="styles"> ...

And everything worked fine. The above codeline is 24:73

After the port to the new project folder everything works fine except for the styling of the map.

Latitude, longitude and zoom are working, but styles does not want to work.

The only difference in the two project folders is that one enabled app-routing from the beginning and the first one did not enable app-routing.

Now the variable styles is somehow giving a bunch of errors for the project containing app-routing. All other variables (latitude, longitude and zoom are still working in the project containing app routing.

compilererror

To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information