title: matInput directive not working in lazy loaded module
body: <p>I have created a module for lazy loading which does work essentially, the problem is that for some reason things like <code>matInput</code> is not working. By that I mean that the <code>input</code> does not get its fancy look.</p>
  
  <p><code>MatInputModule</code> gets imported in the module accordingly:</p>
  
  <pre class="lang-js prettyprint-override"><code>const routes = [
    {path: '', component: AddPlaceComponent}
  ];
  
  
  const MaterialModules = [
    MatFormFieldModule,
    MatInputModule,
  ];
  
  @NgModule({
    declarations: [    
      // Organisms
      PlaceAutocompleteComponent,    
      // Templates
      AddPlaceComponent,
    ],
    imports: [
      CommonModule,
      FormsModule, ReactiveFormsModule,
      RouterModule.forChild(routes),
      FlexLayoutModule,
      MaterialModules,
    ]
  })
  export class AddPlaceModule { }
  </code></pre>
  
  <p>The <code>PlaceAutocompleteComponent</code>, which is where the <code>input</code> is needed, is as simple as it gets:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div&gt;
    &lt;input matInput placeholder="test" autocomplete="off"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Still, the control looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/GGlSv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GGlSv.png" alt="enter image description here"></a></p>
  
  <p>I just don't see it. All other routes are working. The lazy loading works also fine and there are no warnings or errors in the console.</p>
  
  <p>What am I missing?</p>
  
  <p>I assume it has something to do with the lazy loading and/or routing?</p>