A Module in Angular2 is very similar to the Angular1 modules , which basically is a package containing all the bits and pieces that makes sense to be shipped together.
For example , if you have a LoginComponent which for some reasons is connected to a Service , which is LoginService, which does some http request to get some user information , you might create a LoginModule which ships LoginComponent and LoginService all together as LoginModule.
LoginService could also use some interfaces , for example a UserInterface , which again , would makes sense to be shipped to LoginModule to the consumer.
So if I'm your client and I'm going to use your general Login functionality , would makes it much easier for me to just import your LoginModule and all your goodies available to my AppComponent !
So , your LoginModule class ( which is nothing but a simple javascript file and a function ) should export LoginModule to be used by me :).
LoginModule would look like this:
@NgModule({
declaration:[LoginComponent , LogoutComponent],
exports: [
LoginComponent , LogoutComponent
],
providers:[LoginService]
})
export class LoginModule{
}
So in my AppModule , I would import your LoginModule.
@NgModule({
imports: [
LoginModule,
RouterModule.forChild(heroesRoutes) // another imported module that I need beside the Login
]
})
BUT :
If I know your code and I don't want any of your extra functions and components and classes and things and I just need to use your LoginComponent , I might prefer to only declare that I'm using LoginComponent and I don't want to import your massive LoginModule !
@NgModule({
declaration:[LoginComponent],
imports: [
RouterModule.forChild(heroesRoutes)
]
})
This would only and only work if LoginComponent does not have any direct dependency on LoginService , other wise Angular would complain and say :
**No Provider for LoginService**
Which in that case , if you're a tough person and you're still not convinced to use LoginModule , you can help Angular and provide the LoginService like :
@NgModule({
declaration:[LoginComponent],// declaring it
providers:[LoginService],// providing it
imports: [
RouterModule.forChild(heroesRoutes)
]
});
So , this might continue and you might find it easier to just import the whole LoginModule and let the Module itself do all of the job .!
That's it with LoginModule.
Now , to answer your question regarding forChild.
The LoginModule might want to do some extra things when giving you it's classes which is not always needed , in that case you might have improved the LoginModule and added some sugar to it.
@NgModule({
declaration:[LoginComponent , LogoutComponent],
exports: [LoginComponent , LogoutComponent],
providers:[LoginService]
})
export class LoginModule{
public static logAndLoadModule(message){
console.log('I first log and then give you my module');
return {
ngModule: LoginModule
}
}
public static alertAndLoadModule(message){
alert('I first alert and then give you my module');
return {
ngModule: LoginModule
}
}
}
Which , in this case , looks like the module can log something when it starts giving me it's package . So I might use it like this:
@NgModule({
imports: [
LoginModule.logAndLoadModule(),
RouterModule.forChild(heroesRoutes)
]
})
Isn't logAndLoadModule this similar to forChild function of RouterModule ?
Yes it is , it still gives you LoginModule but it does some extra thing as well.
So you can still import LoginModule , but you can use it's alert and log as well.
UPDATE:
export class LoginModule , means , the current file ( probably login.module.ts or whatever ) is exporting a class called LoginModule which can be imported from other files and it has nothing to do with Angular , this is only typescript which will compile to javascript.
Where as
@NgModule({
exports: [
LoginModulesBrother
]
})
export class LoginModule{
}
Above is Angular2 specific language and means LoginModule is also Exporting LoginModulesBrother , so who ever is importing LoginModule , has also have access to to LoginModulesBrother.
So , LoginModulesBrother , is another module which is probably defined somewhere else like :
@NgModule({
// some other magic here
})
export class LoginModulesBrother{
}
So generally , import and export a class , which could be what ever ( a Module a component a pipe a simple function or anything ) is only typescript , but that exports array and imports array is only Angular specific language and means nothing to typescript .
