title: What could be the reason Angular 5 + Material 2 are very very slow?
body: <p>I know this might not be a very good question. But I really don't know what to do and I am searching for reasons.</p>
  
  <p>I am running my custom Angular 5 + Material 2 application locally and the <code>mat-dialog</code> and <code>mat-tab</code> are very slow. I have even tried to turn off animations but it's still very slow.</p>
  
  <p>Also when compiling for production with <code>ng-build --prod</code> delivers very slow results.</p>
  
  <p>So maybe I am doing something wrong regarding the dialog. Here is my code:</p>
  
  <pre><code>  openEditDialog(car:Car) {
      let dialogRef = this.dialog.open(EditDemandComponent);
      dialogRef.componentInstance.id = car.id;
      dialogRef.afterClosed().subscribe(result =&gt; {
        console.log('The edit dialog was closed');
      });
    }
  </code></pre>
  
  <p>My constructor:</p>
  
  <pre><code>  constructor(
      private httpClient: HttpClient, 
      private dialog: MatDialog, etc..
  </code></pre>
  
  <p>and the constructor of the dialog component:</p>
  
  <pre><code>constructor(public dialogRef: MatDialogRef&lt;EditDemandComponent&gt;, etc..
  </code></pre>
  
  <p>Inside the dialog component I am using the code <code>this.dialogRef.close();</code></p>
  
  <p>I am really out of options here and I really don't get it, since the material 2 docs are super fast and for me locally everything is super slow. Indicating slow as animations not going smoothly. Taking at least 2 seconds to open a dialog or switch tabs.</p>
  
  <p>Here are my versions:</p>
  
  <pre><code>  "dependencies": {
      "@angular/animations": "^5.0.2",
      "@angular/cdk": "^5.0.0-rc.1",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/flex-layout": "^2.0.0-beta.10-4905443",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/material": "^5.0.0-rc.1",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/router": "^5.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.5.2",
      "zone.js": "^0.8.14"
    }
  </code></pre>
  
  <p><strong>It's slow in Chrome, IE, and Edge</strong></p>
  
  <p>My system is a development laptop, core I7, SSD, 16gb RAM etc. Don't think it's the system that is slow.</p>
  
  <p>Can anyone help me?</p>
  
  <p><strong>Edit:</strong>
  Added this browser performance measure: I think the issue is somewhere in the  animations. It's running a few, and only this one already takes 1.2 seconds. It would be acceptable if it was smooth, but it isn't. Nothing is really smooth regarding material actually. Just can't explain it.</p>
  
  <p>Added also an image of all that it's doing. Is this normal?</p>
  
  <p><a href="https://i.stack.imgur.com/B1B2v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B1B2v.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/Zgg37.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zgg37.png" alt="enter image description here"></a></p>