Normally, one app can include:

1. App Module: this is root module
2. Feature Module: this is different sections of the App, normally, in this module, another routing module can be included that will be imported into Feature Module. For Feature Module, you have to declare the component, directive and pipe that will be used in this module, however, component, directive and pipe can only be declared in one module, can’t be declared twice.
3. Share Module: Normally declare the component, directive and pipe that will be used in several other modules, which also need to be export, then import in other module to be used
4. Core Module: normally this module is set up for leaner App module. All services in App Module could be put here, using “providers: […services…]” (note: not need to export), and then import to App Module, that will be worked. Note: you also can use @Injectable({providedIn: ‘root’}) to register service in the root.

Lazy Loading:

1. If you want to do lazy loading, the module that will be lazy loaded should have its own route, and also the path should be set up as empty string.
2. In root route module, set up another route, “path” sets up as the lazy loading module, and “loadChildren” property to point to the module for lazy loading;, two methods: (Note: the second method is used by new version of angular)
   • {path: ‘recipes’, loadChildren: ‘./recipes/recipes.module#RecipesModule’}
   • {path: ‘recipes’, loadChildren: () => import(‘./recipes/recipes.module’).then(m => m.RecipesModule)}
3. Also remember to delete the modules for lazy loading from App Module’s import part
4. you can optimize your lazy loading by pass the second argument in RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules}). This will load the lazy loading module when it is possible to faster page loading later.

Service: