I'm getting used to Angular 2 but I have a few questions concerning the app.module.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?
Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application. In case you are developing a website, the header, footer, left, center and the right section become part of a module.
In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application. An Angular application can be thought of as a puzzle where each piece (or each module) is needed to be able to see the full picture.
Modules provide a container for your app's source code, resource files, and app level settings, such as the module-level build file and Android manifest file. Each module can be independently built, tested, and debugged. Android Studio uses modules to make it easy to add new devices to your project.
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
.
What is the purpose of the app.module.ts?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With