CODEWITHSUNDEEP
angular
Shadab
Shadab

Reputation: 821

Angular 4 imports understanding in module and component file

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
    ],

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

    import { AngularFireAuth } from 'angularfire2/auth';

Now I have following questions -

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

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

Upvotes: 1

Views: 1706

Answers (2)

DeborahK
DeborahK

Reputation: 60518

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

Upvotes: 2

Mauricio De La Quintana
Mauricio De La Quintana

Reputation: 2442

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.

Upvotes: 2

Related Questions