Angular 4 imports understanding in module and component file

Question

I am following an Angular4-Firebase integration tutorial where first they are writing following code in app.module.ts - 1.

import { AngularFireAuthModule } from 'angularfire2/auth';
    imports: [
      //Some other imports
      AngularFireModule.initializeApp(firebaseConfig),
      //Some more imports
    ],

Then in app.component.ts they are again importing some other firebase related stuffs -

import { AngularFireAuth } from 'angularfire2/auth';

Now I have following questions -

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.
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?

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.

Thanks in advance.

Update - Here is the link to the said tutorial

First you say app and app.component, then app and app.module. Which one is it? — Sami Kuhmonen
– Sami Kuhmonen, Commented Aug 16, 2017 at 17:23
you might find this article helpful Avoiding common confusions with modules in Angular — Max Koretskyi
– Max Koretskyi, Commented Aug 16, 2017 at 17:26
That doesn't have much to do with Angular. It rather is a question about ES6/TypeScript modules. Why in hell don't you use TypeScript BTW? — JB Nizet
– JB Nizet, Commented Aug 16, 2017 at 17:33

DeborahK · Accepted Answer · 2017-08-16 18:09:09Z

2

Import Statement

The import statement:

import { AngularFireAuthModule } from 'angularfire2/auth';

Is an ES 2015 module feature. In ES 2015, a module is a file that imports or exports something. Every ES 2015 module (ie code file) needs to define where to find what it uses. So if a code file uses the @component decorator, then it needs to have an import statement defining where to find the @component decorator:

import { Component } from '@angular/core';

Imports Array

Angular modules are different from ES 2015 modules. They help us organize our applications.

The imports array of an Angular module defines all of the external modules that the application will use.

imports: [
  //Some other imports
  AngularFireModule.initializeApp(firebaseConfig),
  //Some more imports
],

I have a youtube video here that discusses the difference between ES 2015 modules and Angular modules: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=6s

answered Aug 16, 2017 at 18:09

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shadab Over a year ago

Thank you very much for the video. It is helping me a lot to understand things better. I have few more questions -

Shadab Over a year ago

1. If I have already imported Component in app.module why do I need to import it again in feature modules. Aren't all other components are nested under app component? 2. We dont specify in app.module which component it is related to, neither we do it in ap.component. Then how Angular binds them?

DeborahK Over a year ago

Check out my answer here: stackoverflow.com/questions/45724051/… (I even posted a picture. :-)

Mauricio De La Quintana · Accepted Answer · 2017-08-16 17:55:46Z

2

to answer your question I can divide imports

Component Imports

The imports at the top of the file are TypeScript imports to make classes, interfaces and variables known to the current file and are not related angular dependency injection system usually this happens with third party libraries.

Module Imports

The imports use angular dependency injection and can be exported. This also creates a new instance that can be shared with the elements (making it ideal for configuring parameters in your case ) without needing to instantiate multiple time.

answered Aug 16, 2017 at 17:55

Mauricio De La Quintana

2,44220 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 4 imports understanding in module and component file

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related