title: Angular 4 imports understanding in module and component file
body: <p>I am following an Angular4-Firebase integration tutorial where first they are writing following code in <strong>app.module.ts</strong> - 
  1.</p>
  
  <pre><code>import { AngularFireAuthModule } from 'angularfire2/auth';
      imports: [
        //Some other imports
        AngularFireModule.initializeApp(firebaseConfig),
        //Some more imports
      ],
  </code></pre>
  
  <ol start="2">
  <li><p>Then in <strong>app.component.ts</strong> they are again importing some other firebase related stuffs -</p>
  
  <p>import { AngularFireAuth } from 'angularfire2/auth';</p></li>
  </ol>
  
  <p><strong>Now I have following questions -</strong></p>
  
  <ol>
  <li><p>Why they are importing modules/dependencies at two different places in app.module.ts and app.comonent.ts. Why cant they do it at app.module.ts only.</p></li>
  <li><p>As per my understanding, it looks like they are importing a module 'AngularFireAuthModule' in app.module.ts and then importing Firebase related components in the component file(app.component.js) where they need to use it. Is this so?</p></li>
  </ol>
  
  <p>It would be great if any one can share a reference to understand module and component deeply in Angular 4. All tutorials that I am following use angular cli that generates everything at the run time and the tutorial asks to update certain code at certain places to make it work for them.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Update</strong>
   - <a href="https://coursetro.com/posts/code/54/Angular-4-Firebase-Tutorial:-Make-a-Simple-Angular-4-App" rel="nofollow noreferrer">Here is the link to the said tutorial</a></p>