angular-google-maps agm-snazzy-info-windowが正しく表示されなかった

2270 ワード
Angular2 angular-google-maps angular-google-maps テキストリンク

angular-google-mapsの「agm-snazzy-info-window」が正しく表示されなかった。
備忘録の意味も込めて投稿します。

コード

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngFor="let marker of markers" 
        [latitude]="marker.lat" 
        [longitude]="marker.lng" 
        [iconUrl]="marker.iconUrl"
        [label]="marker.label"
        (markerClick)="makerClick(marker.label,$event)"
        >
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="false" [isOpen]="true">
            <ng-template>
                {{marker.label}}
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>
angular-cli.json(抜粋)
      "styles": [
        "styles.css",
        "../node_modules/snazzy-info-window/dist/snazzy-info-window.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

起きていたこと

CSS読み込まれてない？ でも設定入れているのに……

原因

ng serveでサーバ起動したまま「.angular-cli.json」を修正していたため。
どうやら再起動しないと反映されないもよう。
（issue漁ってたら見つけた https://github.com/SebastianM/angular-google-maps/issues/1244）

見つけてよかった……。　知らないまま明日直ってたら余計悩んでいたと思われる。