title: angular materials does not load
body: <p>I am trying to create a form using angular materials, however, it currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/GAw9g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GAw9g.png" alt="enter image description here"></a></p>
  
  <p>So, clearly, there is some CSS missing but I cannot figure out where.</p>
  
  <p>I have a component like this:</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { Feedback, Environments, FeedbackType } from '../shared/feedback';
  import { FeedbackService} from '../services/feedback.service';
  
  @Component({
    selector: 'app-contact',
    templateUrl: './contact.component.html',
    styleUrls: ['./contact.component.css']
  })
  export class ContactComponent implements OnInit {
  
    feedbackForm: FormGroup;
    feedback: Feedback;
    feebackTypes = FeedbackType;
    environments = Environments;
    @ViewChild('fform') feedbackFormDirective;
  
    visibilityForm = true;
    visibilityProgress = false;
  
    formErrors = {
      'rd_number': '',
      'type': '',
      'environment': '',
      'email': '',
      'description': ''
    };
  
    validationMessages = {
      'rd_number': {
        'required': 'You have to provide a RD number.',
      },
  
      'email': {
        'required': 'Email is required.',
        'email': 'Email not in valid format.'
      },
      'description': {
        'required': 'Please provide a detailed description.',
      }
    };
  
    constructor(private fb: FormBuilder,
      private feedBackService: FeedbackService) {
      this.createForm();
     }
  
    ngOnInit() {
    }
  
    createForm() {
      this.feedbackForm = this.fb.group({
        rd_number: ['', [Validators.required]],
        type: '',
        environment: 'env1',
        email: ['', [Validators.required, Validators.email]],
        description: ['', [Validators.required]]
      });
  
      this.feedbackForm.valueChanges
        .subscribe(data =&gt; this.onValueChanged(data));
  
        this.onValueChanged(); // (re)set form validation messages
    }
  
    onValueChanged(data?: any) {
      if (!this.feedbackForm) {
        return;
      }
      const form = this.feedbackForm;
      for (const field in this.formErrors) {
        if (this.formErrors.hasOwnProperty(field)) {
          // clear previous error messages (if any)
          this.formErrors[field] = '';
          const control = form.get(field);
          if (control &amp;&amp; control.dirty &amp;&amp; !control.valid) {
            const messages = this.validationMessages[field];
            for (const key in control.errors) {
              if (control.errors.hasOwnProperty(key)) {
                this.formErrors[field] += messages[key] + ' ';
              }
            }
          }
        }
      }
    }
  
    onSubmit() {
      this.visibilityForm = false;
      this.visibilityProgress = true;
      this.feedBackService.submitFeedback(this.feedbackForm.value)
        .subscribe(fb =&gt; {
          this.visibilityProgress = false;
          this.feedback = fb;
          setTimeout(f =&gt; {
            this.visibilityForm = true;
            this.feedback = null;
            }, 5000);
      });
  
      this.feedbackForm.reset({
        rd_number: '',
        type: '',
        environment: 'env1',
        email: '',
        description: ''
      });
      this.feedbackFormDirective.resetForm();
    }
  
  }
  </code></pre>
  
  <p>and the corresponding HTML looks as follows:</p>
  
  <pre><code>&lt;div class="container"
    fxLayout="column"
    fxLayoutGap="10px"&gt;
  
  
    &lt;div fxFlex fxFlexOffset="20px" class="form-size"&gt;
      &lt;h3&gt;Send us your feedback&lt;/h3&gt;
      &lt;p&gt;{{ feedbackForm.value | json }} {{ feedbackForm.status | json }}&lt;/p&gt;
      &lt;form novalidate [formGroup]="feedbackForm" #fform="ngForm" (ngSubmit)="onSubmit()" *ngIf="visibilityForm"&gt;
        &lt;p&gt;
          &lt;mat-form-field class="half-width"&gt;
            &lt;input matInput formControlName="rd_number" placeholder="RD number" type="text" required&gt;
            &lt;mat-error *ngIf="formErrors.rd_number"&gt;
              {{ formErrors.rd_number }}
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
          &lt;mat-form-field class="half-width"&gt;
            &lt;input matInput formControlName="email" placeholder="Email" type="email" email required&gt;
            &lt;mat-error *ngIf="formErrors.email"&gt;
                {{ formErrors.email }}
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/p&gt;
        &lt;table class="form-size"&gt;
          &lt;td&gt;
            &lt;mat-form-field class="full-width"&gt;
              &lt;mat-select placeholder="Type" formControlName="type"&gt;
                &lt;mat-option *ngFor="let ftype of feedbackTypes" [value]="ftype"&gt;
                  {{ ftype }}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;mat-form-field class="full-width"&gt;
              &lt;mat-select placeholder="Environment" formControlName="environment"&gt;
                &lt;mat-option *ngFor="let env of environments" [value]="env"&gt;
                  {{ env }}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/td&gt;
        &lt;/table&gt;
        &lt;p&gt;
          &lt;mat-form-field class="full-width"&gt;
            &lt;textarea matInput formControlName="description" placeholder="Your Feedback" rows=12&gt;
            &lt;/textarea&gt;
          &lt;/mat-form-field&gt;
        &lt;/p&gt;
        &lt;button type="submit" mat-button class="background-primary text-floral-white"
          [disabled]="feedbackForm.invalid"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div *ngIf="visibilityProgress"&gt;
      &lt;mat-spinner&gt;&lt;/mat-spinner&gt;&lt;h4&gt;Your data are being processed... Please wait&lt;/h4&gt;
    &lt;/div&gt; 
  
  &lt;/div&gt;
  </code></pre>
  
  <p><code>app.module.ts</code>:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import { MatToolbarModule} from '@angular/material/toolbar';
  import { MatListModule } from '@angular/material/list';
  import { MatGridListModule } from '@angular/material/grid-list';
  import { MatCardModule } from '@angular/material/card';
  import { MatButtonModule } from '@angular/material/button';
  import { MatDialogModule } from '@angular/material/dialog';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatCheckboxModule } from '@angular/material/checkbox';
  import { MatSelectModule } from '@angular/material/select';
  import { MatSlideToggleModule} from '@angular/material/slide-toggle';
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
  import { MatSliderModule } from '@angular/material/slider';
  
  import 'hammerjs';
  
  import { FlexLayoutModule} from '@angular/flex-layout';
  import { FormsModule } from '@angular/forms';
  import { ReactiveFormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  
  import { ProcessHTTPMsgService } from './services/process-httpmsg.service';
  
  import { AppComponent } from './app.component';
  import { ContactComponent } from './contact/contact.component';
  
  import { baseURL } from './shared/baseurl';
  
  @NgModule({
    declarations: [
      AppComponent,
      ContactComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FlexLayoutModule,
      FormsModule,
      ReactiveFormsModule,
      HttpClientModule,
      MatListModule,
      MatToolbarModule,
      MatGridListModule,
      MatCardModule,
      MatButtonModule,
      MatDialogModule,
      MatFormFieldModule,
      MatInputModule,
      MatCheckboxModule,
      MatSelectModule,
      MatSlideToggleModule,
      MatProgressSpinnerModule,
      MatSliderModule
    ],
    providers: [
      ProcessHTTPMsgService,
      { provide: 'BaseURL', useValue: baseURL }],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Any ideas what I might miss?</p>