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?

Mateo

read Avoiding common confusions with modules in Angular – Weasel

I have a youtube video that explains this here: youtube.com/watch?v=ntJ-P-Cvo7o – Prevost

@Prevost tnx for the video. – Mateo

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.

Magnifico

tnx for the global and local service explanation... So basically the imports and declaration in the app.module are shared across the application right? – Mateo

Why do i still have to import my service in my local component when I have provided it inside my module.ts? – Mateo

You have to import the service in your component for the sake of the compiler. But you don't need to provide the service in the component if it is provided in the module. – Magnifico

@Tyler Jennings, I would remove the comments regarding injecting services at the component level. In order for them to be available to the component, they need to declared in the app.module.ts level. So, it's not possible, to only do DI at the component level. – Cirrocumulus

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

Balalaika