为什么我的bootstrap导航栏在Angular 2中破坏了我的Google Map？

Question

我成功加载了我的谷歌地图，但第二次我在我的app.component模板中添加了一个bootstrap导航栏，我开始收到此错误：

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./MainComponent class MainComponent - inline template:0:0 caused by: Cannot read property 'firstChild' of null.

我的地图ID与我的documentGetElementById相匹配（这似乎是人们遇到此问题的常见原因），因此不是问题所在。只要导航栏不存在，我的地图就会成功加载。

主要组件

<app-map></app-map>

应用程序组件

<app-navbar><app-navbar>
<router-outlet></router-outlet>

地图模板

<div class="container-fluid">
  <div class="row">

<!-- MAP -->
<div class="map-container col-xs-12">

        <div id="map">

        </div>

</div>


</div>
</div>

地图组件

import { Component, OnInit } from '@angular/core';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';

declare var google: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {

  // google.charts.load('current', {'packages':['geochart']});
  //     google.charts.setOnLoadCallback(drawRegionsMap);

  constructor() { }


  ngOnInit() {

      let mapOptions = {
            center: new google.maps.LatLng(0,0),
            zoom: 2
        };

        let map = new google.maps.Map(document.getElementById('map'), mapOptions);

  }

}

导航组件

import { Component, OnInit } from '@angular/core';
import { RouterModule } from "@angular/router";

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

导航模板

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">aether news</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    </div> -->
  </div>
</nav>