title: Angular 6 - Rendering problems if BrowserAnimationsModule imported (Openlayers)
body: <p>I basically have a App which renders a small map. On this page is also a "toggle" button which hides the small map with a *ngIf in the parent component and displays the map in large instead. 
  If I now import BrowserAnimationsModule in app.module.ts the large map is not rendered if I click on the toggle button (only if i set a timeout of 1ms before the map is created in ngOnInit of map-base.component.ts).</p>
  
  <p>Sorry..it's a bit hard to explain, here's the code:</p>
  
  <p><strong>App.module.ts</strong></p>
  
  <pre><code>...
  @NgModule({
    declarations: [
      AppComponent,
      MapSmallComponent,
      MapLargeComponent,
      MapBaseComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      BrowserAnimationsModule, // comment this line, to make the app work
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-root',
    template: `
    &lt;app-map-small *ngIf="small"&gt;&lt;/app-map-small&gt;
    &lt;app-map-large *ngIf="!small"&gt;&lt;/app-map-large&gt;
    &lt;button (click)="small = !small"&gt;Toggle&lt;/button&gt;`,
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    small = true;
  }
  </code></pre>
  
  <p><strong>map-base.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-map-base',
    template: `&lt;div id="map" class="map"&gt;&lt;/div&gt;`,
    styleUrls: ['./map-base.component.scss']
  })
  export class MapBaseComponent implements OnInit {
    map: OlMap;
    constructor() { }
  
    ngOnInit() {
      this.map = new OlMap({
        target: 'map',
        layers: [new OlTileLayer({ source: new OlOSM() })],
        view: new OlView({ zoom: 13, center: fromLonLat([13.376935, 52.516181]) }),
        controls: []
      });
    }
  }
  </code></pre>
  
  <p><strong>map-small.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-map-small',
    template: `
      &lt;p&gt;other stuff&lt;/p&gt;
      &lt;div style="max-width:500px"&gt;
        &lt;app-map-base&gt;&lt;/app-map-base&gt;
      &lt;/div&gt;
      &lt;p&gt;other stuff2&lt;/p&gt;
    `,
    styleUrls: ['./map-small.component.scss']
  })
  export class MapSmallComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p><strong>map-large.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-map-large',
    template: `
    &lt;p&gt;Some other stuff&lt;/p&gt;
    &lt;app-map-base&gt;&lt;/app-map-base&gt;`,
    styleUrls: ['./map-large.component.scss']
  })
  export class MapLargeComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p><strong>dependencies</strong></p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "^6.0.9",
      "@angular/cdk": "^6.4.0",
      "@angular/common": "^6.0.2",
      "@angular/compiler": "^6.0.2",
      "@angular/core": "^6.0.2",
      "@angular/forms": "^6.0.2",
      "@angular/http": "^6.0.2",
      "@angular/material": "^6.4.0",
      "@angular/platform-browser": "^6.0.2",
      "@angular/platform-browser-dynamic": "^6.0.2",
      "@angular/router": "^6.0.2",
      "core-js": "^2.5.4",
      "ol": "^5.1.3",
      "rxjs": "^6.0.0",
      "zone.js": "^0.8.26"
    },
  </code></pre>
  
  <p>So why works everything fine, if I don't import BrowserAnimationsModule and it breaks if I import it? I want to use Angular Material, that's I would need it...</p>