NgModule

Feature Module

It is good idea to bundle common functionality in a module. In angular we can create functionality specific module. It help us to keep root module cleaner and shorter. We import feature module to use it in our application. Suggestion: Do not export commonly used module from feature module, export only what you need in other part pf the app. Like from feature module we will not export BrowserModule or CommonModule, we will keep them in RootModule, we will export the component, directive and pipes from feature module.

Types of Feature Modules

• Domain feature modules : Domain feature modules deliver a user experience dedicated to a particular application domain like editing a customer or placing an order.They typically have a top component that acts as the feature root and private, supporting sub-components descend from it. Only the top component is exported.Domain feature modules are typically imported exactly once by a larger feature module. Domain feature modules rarely have providers. When they do, the lifetime of the provided services should be the same as the lifetime of the module.
• Routed feature modules : Routed feature modules are domain feature modules whose top components are the targets of router navigation routes.All lazy-loaded modules are routed feature modules by definition.A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.
• Routing modules: A routing module provides routing configuration for another module and separates routing concerns from its companion module
• Service feature modules : Service modules provide utility services such as data access and messaging. Ideally, they consist entirely of providers and have no declarations. Angular's HttpClientModule is a good example of a service module.
• Widget feature modules: A widget module makes components, directives, and pipes available to external modules. Many third-party UI component libraries are widget modules.

Entry Components

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition. A route definition refers to a component by its type with component All router components must be entry components. Because this would require you to add the component in two places (router and entryComponents) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into entryComponents.

Providers

A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.The service itself is a class that the CLI generated and that's decorated with @Injectable. By default, this decorator is configured with a providedIn property, which creates a provider for the service. The service itself is a class that the CLI generated and that's decorated with @Injectable.

Provider scope

When you add a service provider to the root application injector, it’s available throughout the app. Additionally, these providers are also available to all the classes in the app as long they have the lookup token.

When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance created for the application root. Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components

Singleton services

There are two ways to make a service a singleton in Angular:

• Declare that the service should be provided in the application root.
• Include the service in the AppModule or in a module that is only imported by the AppModule.

forRoot()

If a module provides both providers and declarations (components, directives, pipes) then loading it in a child injector such as a route, would duplicate the provider instances.Angular provides a way to separate providers out of the module so that same module can be imported into the root module with providers and child modules without providers.

• Create a static method forRoot() (by convention) on the module.
• Place the providers into the forRoot method as follows. For this reason Angular provides a way to separate providers out of the module so that same module can be imported into the root module with providers and child modules without providers.

The eagerly loaded scenario

When an eagerly loaded module provides a service, for example a UserService, that service is available application-wide. If the root module provides UserService and imports another module that provides the same UserService, Angular registers one of them in the root app injector (see What if I import the same module twice?). Then, when some component injects UserService, Angular finds it in the app root injector, and delivers the app-wide singleton service. No problem.