Angular. Module structuring

Question

May be I need only explanation (without answer to my question, it could be not valid in some explanation cases). Studying angular I've found how to create new module using angular-cli. ...but I have no idea how to use if from main module. To be close with angular I've tried next experiment.

I've generated a modules:

$  ng generate module myTestModule
installing module
  create src/app/my-test-module/my-test-module.module.ts

$  ng generate module myTestModule2
installing module
  create src/app/my-test-module2/my-test-module2.module.ts

---

1. I have usual file describes the main module app.module.ts. I could register module my-test-module.module.ts in the app.module.ts and my-test-module2.module.ts in the my-test-module.module.ts. How could it make my application better?

2. I red splitting application on many modules provides better performance. But I confused with this. If I use some data loading functionality to URI1 module1 loads data, I navigate to URI2 module1 is deactivated, but module2 loads data. If I navigate back module1 is staying active one more time and loads same data second time! Have I missed something in angular?

3. How I can get benefits from module structuring with angular?

Answer 1

hi talking about benefits you have:

• Modules are independent and can be moved or used in multiple sides, this avoids code duplication more info here https://angular.io/guide/styleguide#application-structure-and-angular-modules.
• Another advantage is the ability to use lazy loading. More info here https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router this will make you import the thinks you need based on the router.For example a homescreen only needs to load a component and it should be as quick as possible.

• Smart imports, when importing libraries we usually make mistakes and we don't need the whole import one example is.

  import { Observable } from 'rxjs/Observable';
  import * from "rxjs";
  

  in this example we use only the observable and don't need to import the whole library because it will make our bundle size bulkier. Splitting our code in modules will allow to make smart imports like this example.

   import { MdToolbarModule} from '@angular/material';
   // import { MaterialModule } from '@angular/material';
   imports: [
     // MaterialModule.forRoot(),
     MdToolbarModule,
   ], 
  

  we could have imported the whole library but as this is a simple component we only need a short module.

Answer 2

On #2 - could you give more details? Do module1 and module2 execute same request and you want to have result shared? If so, then you have to create Service and put in core.module, that module has to be imported only once per application. angular.io has documentation page called Style Guide, please read it, it has few very important and useful notes regarding structuring of your project (especially concept of core and shared modules).

If module1 and module2 execute different requests and you want to have that request cached (i.e. do not execute 2nd time, when navigate back to module1) - you have to "cache" that data manually (just save results to variable in service).

As per my understanding, when you have multi-module structure you can: - do Lazy Load (or prevent loading at all, e.g. if user doesn't have permissions) - files (js/html) will be loaded only when user request them or after main page is loaded (deffered loading). It increase start-up time - in general, when module/component is unloaded from page, all observers/watcher/other zone-ng stuff is kinda "garbage collected", which decrease memory usage