Angular 6 - Problèmes de rendu si BrowserAnimationsModule est importé (Openlayers)

J'ai essentiellement une application qui affiche une petite carte. Sur cette page se trouve également un bouton "basculer" qui masque la petite carte avec un *ngIf dans le composant parent et affiche la carte en grand à la place. Si j'importe maintenant BrowserAnimationsModule dans app.module.ts, la grande carte n'est pas rendue si je clique sur le bouton bascule (uniquement si je fixe un délai d'attente de 1 ms avant que la carte ne soit créée dans ngOnInit de map-base.component.ts).

Désolé..c'est un peu difficile à expliquer, voici le code:

App.module.ts

...
@NgModule({
 declarations: [
 AppComponent,
 MapSmallComponent,
 MapLargeComponent,
 MapBaseComponent
 ],
 imports: [
 BrowserModule,
 FormsModule,
 BrowserAnimationsModule, // comment this line, to make the app work
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

@Component({
 selector: 'app-root',
 template: `
 <app-map-small *ngIf="small"></app-map-small>
 <app-map-large *ngIf="!small"></app-map-large>
 <button (click)="small =!small">Toggle</button>`,
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 small = true;
}

map-base.component.ts

@Component({
 selector: 'app-map-base',
 template: `<div id="map" class="map"></div>`,
 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: []
 });
 }
}

map-small.component.ts

@Component({
 selector: 'app-map-small',
 template: `
 <p>other stuff</p>
 <div style="max-width:500px">
 <app-map-base></app-map-base>
 </div>
 <p>other stuff2</p>
 `,
 styleUrls: ['./map-small.component.scss']
})
export class MapSmallComponent implements OnInit {
 constructor() { }
 ngOnInit() {
 }
}

map-large.component.ts

@Component({
 selector: 'app-map-large',
 template: `
 <p>Some other stuff</p>
 <app-map-base></app-map-base>`,
 styleUrls: ['./map-large.component.scss']
})
export class MapLargeComponent implements OnInit {
 constructor() { }
 ngOnInit() {
 }
}

dépendances

"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"
 },

Alors pourquoi tout fonctionne bien, si je n'importe pas BrowserAnimationsModule et qu'il se casse si je l'importe? Je veux utiliser Angular Material, j'en aurais besoin...

Solution du problème

Voici une solution,

Modèle de composant

<div #mapElementRef class="map"></div>

La classe de composant implémente OnInitet a la propriété suivante

@ViewChild('mapElementRef', { static: true }) mapElementRef: ElementRef;

enfin initialiser la carte sur la ngOnInitméthode, vous pouvez utiliser

this.map.setTarget(this.mapElementRef.nativeElement);

J'espère que cela aide.