title: Angular Material Input not working
body: <p>I, am using Angular material reference from  <a href="https://material.angular.io/components/form-field/overview" rel="nofollow noreferrer">https://material.angular.io/components/form-field/overview</a> and example from <a href="https://stackblitz.com/angular/kopgoqmxvbdl?file=app%2Fform-field-overview-example.html" rel="nofollow noreferrer">https://stackblitz.com/angular/kopgoqmxvbdl?file=app%2Fform-field-overview-example.html</a></p>
  
  <p>I, have the same code as shown in the example. However, it is not working for me. I, am using angular 5 template in asp.net code 2.0.</p>
  
  <p>In my index.cshtml page I, have added </p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
  </code></pre>
  
  <p>Here is the html code where input field are not working </p>
  
  <p><strong>dashboard.component.html</strong></p>
  
  <pre><code>&lt;div class="example-container"&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Input"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
          &lt;textarea matInput placeholder="Textarea"&gt;&lt;/textarea&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
          &lt;mat-select placeholder="Select"&gt;
              &lt;mat-option value="option"&gt;Option&lt;/mat-option&gt;
          &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The same code from example.</p>
  
  <p>Here is the <strong>App.share.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  import 'hammerjs';
  import 'angular-polyfills';
  import 'web-animations-js';
  import { AppComponent } from './components/app/app.component';
  import { EqualValidator } from "./components/Validation/equal.validator.directive";
  import { HomeComponent } from './components/home/home.component';
  import { LoginComponent } from './components/usercreation/login.component';
  import { MobileComponent } from './components/mobile/mobile.component';
  import { SocialComponent } from './components/usercreation/social.component';
  import { RegisterComponent } from './components/usercreation/signup.component';
  import { DashBoardComponent } from './components/dashboard/dashboard.component';
  import { NavMenuComponent } from './components/navmenu/navmenu.component';
  
  import {
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule
  } from '@angular/material';
  import { BrowserModule } from '@angular/platform-browser';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  @NgModule({
      declarations: [
          AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
          HomeComponent, NavMenuComponent,
          LoginComponent,
          MobileComponent,
          SocialComponent
      ],
      imports: [
          CommonModule,
          HttpClientModule,
          FormsModule,
          RouterModule.forRoot([
              { path: '', redirectTo: 'home', pathMatch: 'full' },
              { path: 'home', component: HomeComponent },
              { path: 'login', component: LoginComponent },
              { path: 'mobile', component: MobileComponent },
              { path: 'dashboard', component: DashBoardComponent },
              { path: 'signup', component: RegisterComponent },
              { path: '**', redirectTo: 'home' }
          ]),
          BrowserModule,
          BrowserAnimationsModule,
          MatAutocompleteModule,
          MatButtonModule,
          MatButtonToggleModule,
          MatCardModule,
          MatCheckboxModule,
          MatChipsModule,
          MatStepperModule,
          MatDatepickerModule,
          MatDialogModule,
          MatExpansionModule,
          MatGridListModule,
          MatIconModule,
          MatInputModule,
          MatFormFieldModule,
          MatListModule,
          MatMenuModule,
          MatNativeDateModule,
          MatPaginatorModule,
          MatProgressBarModule,
          MatProgressSpinnerModule,
          MatRadioModule,
          MatRippleModule,
          MatSelectModule,
          MatSidenavModule,
          MatSliderModule,
          MatSlideToggleModule,
          MatSnackBarModule,
          MatSortModule,
          MatTableModule,
          MatTabsModule,
          MatToolbarModule,
          MatTooltipModule
      ],
      exports: [
          MatAutocompleteModule,
          MatButtonModule,
          MatButtonToggleModule,
          MatCardModule,
          MatCheckboxModule,
          MatChipsModule,
          MatStepperModule,
          MatDatepickerModule,
          MatDialogModule,
          MatExpansionModule,
          MatGridListModule,
          MatIconModule,
          MatInputModule,
          MatFormFieldModule,
          MatListModule,
          MatMenuModule,
          MatNativeDateModule,
          MatPaginatorModule,
          MatProgressBarModule,
          MatProgressSpinnerModule,
          MatRadioModule,
          MatRippleModule,
          MatSelectModule,
          MatSidenavModule,
          MatSliderModule,
          MatSlideToggleModule,
          MatSnackBarModule,
          MatSortModule,
          MatTableModule,
          MatTabsModule,
          MatToolbarModule,
          MatTooltipModule
      ]
  })
  export class AppModuleShared {
  }
  </code></pre>
  
  <p><strong>Component Ts File</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AppComponent } from "../app/app.component";
  @Component({
      selector: 'dashboard',
      templateUrl: './dashboard.component.html'
  })
  export class DashBoardComponent {
      private _appComponent: AppComponent;
      constructor(private appComponent: AppComponent) {
  
          this._appComponent = appComponent;
          this._appComponent.menulist = true;
  
  
      }
  
  }
  </code></pre>
  
  <p><strong>webpack.config.vendor.js</strong></p>
  
  <pre><code>const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      'zone.js',
  ];
  const nonTreeShakableModules = [
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      '@angular/material',
      '@angular/material/prebuilt-themes/indigo-pink.css',
      '@angular/cdk',
      'es6-promise',
      'es6-shim',
      'event-source-polyfill',
      'jquery',
  ];
  const allModules = treeShakableModules.concat(nonTreeShakableModules);
  </code></pre>
  
  <p><strong>Vendor.css</strong></p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/indigo-pink.css';
  .mdl-layout--fixed-header &gt; .mdl-layout__header {
      z-index: 6;
  }
  
  .has-drawer .mdl-layout__drawer {
      padding-top: 64px;
  }
  
  .mdl-layout--fixed-drawer:not(.is-small-screen) &gt; .mdl-layout__header {
      padding-left: 240px;
      margin-left: 0;
      width: 100%;
  }
  </code></pre>
  
  <p>Getting an error as GET <a href="http://localhost:54236/dist/~@angular/material/prebuilt-themes/indigo-pink.css" rel="nofollow noreferrer">http://localhost:54236/dist/~@angular/material/prebuilt-themes/indigo-pink.css</a> net::ERR_ABORTED - The css file is not loaded.</p>
  
  <p>Here is the output which I am getting from the code</p>
  
  <p><a href="https://i.stack.imgur.com/p70oz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p70oz.png" alt="output"></a></p>