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.

Answer 2

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

• It is to startup your application, and set the links to your other modules.

---

1 - Modules are the logic layers of your application. Each module is there to package things logically, so that it's easier for people to understand and maintain your application, made of several modules. For example, if you are doing a rich application, you should have a LoginModule, an AuthenticationModule, etc...

2 - You need to import things in your module so that Angular knows what it is going to use. Basically, your LoginModule will need the Angular FormModule, which might not be needed for the AuthenticationModule

3 - This leads us here : The AppModule therefore should only import the others modules it is linked to, and provide the services that will be needed globally. Your future LoginModule won't need a service to be provided, but the AuthenticationModule, which will have an AuthenticationService will most probably do.

These are the basics concepts, try reading the official documentation which offers a lot of knowledge about this subject : https://angular.io/guide/ngmodule