What does the app.module.ts file serve for, what should I do inside of it?

Question

I'm getting used to Angular 2 but I have a few questions concerning the app.module.ts file.

• Why do I have to do the imports in this file since I will be doing the inputs again in the app.components.ts file.

For example: I import my custom pipe and then again I have to import it in my app.components.ts file

import { FirstPipePipe } from './first-pipe.pipe';

@NgModule({
     declarations: [
       AppComponent,
       SecondComponent,
       ThirdComponent,
       FirstComponent,
       FirstPipePipe
     ],
     imports: [
       BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
     ],
     providers: [FetchDataService],
     bootstrap: [AppComponent]    })

Then I have the

imports: [
           BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
         ],

Why do I import some classes and others not?

Why are the providers here, since again, they appear in the app.component.ts

providers: [FetchDataService]

Basically, I have to rewrite everything in my app.component.ts file.

What is the purpose of the app.module.ts?

Answer 1

Modules are a way of organizing and separating your code. You can have multiple modules and lazy load some modules.

You import any other modules into the imports section.

You declare any components in your declarations. Any components used in the routing of that module, must be declared in that module. If components are used in another module, then you only list them in that other module.

And you provide your services in the providers section.

Modules also help control your Dependency Injection... You can provide services at the Component level or the Module level. Providing services at the Module level create an instance of the service to share across the entire module. If you provide a service at the Component level, then it is a unique instance for that Component. It can be best to only provide a service at one level to avoid confusion - either at the module level or at the component level(in each component you need it). I find that most of the time, for myself, it is best and easiest to only provide services at the Module level. Same with pipes and such, though any component/pipe you make must still be declared in the declarations.