Angular 6 Material StaticInjectorError NgZone - angular-material2

Question

After migrating from Angular 5 to Angular 6 all my Material component do not work anymore - again... ...yet this time I am really clueless about what could cause the problem anymore. I invested half a day investigating and created a stripped-down project in order to reproduce the problem in its essence.
Let me show you the various file contents:
package.json
{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.9",
"#angular/cdk": "^6.4.0",
"#angular/common": "^6.0.9",
"#angular/compiler": "^6.0.9",
"#angular/core": "^6.0.9",
"#angular/forms": "^6.0.9",
"#angular/http": "^6.0.9",
"#angular/material": "^6.4.0",
"#angular/platform-browser": "^6.0.9",
"#angular/platform-browser-dynamic": "^6.0.9",
"#angular/platform-server": "^6.0.9",
"#angular/router": "^6.0.9",
"#ngtools/webpack": "1.8.0",
"#types/node": "~6.0.60",
"#types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"codelyzer": "~3.2.0",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"protractor": "~5.1.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "^6.2.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.7.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "^6.0.9",
"#angular/language-service": "^6.0.9",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0"
}
}
app.module
import { NgModule } from '#angular/core';
import { MatDialogModule } from '#angular/material';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { MessageFormComponent } from './components/common/forms/message.component';
#NgModule({
declarations: [
AppComponent,
MessageFormComponent,
],
imports: [
CommonModule,
MatDialogModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: MessageFormComponent },
{ path: '**', redirectTo: 'home' }
]),
]
})
export class AppModuleShared {
}
message.component.ts
import { Component } from '#angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '#angular/material';
#Component({
selector: 'message-form',
template: 'blubb',
})
export class MessageFormComponent {
constructor(private alert: MatDialog) { } // this line causes the problem
}
As soon as I make ANYTHING with the material - this error occurs. I am good in programming angular programs - not so good in fiddling around with the NEVER WORKING infrastructure... ;-)