Skip to content

Commit dcf3be6

Browse files
committed
Add module and new feature questions
1 parent f0cfd37 commit dcf3be6

File tree

1 file changed

+107
-16
lines changed

1 file changed

+107
-16
lines changed

Diff for: README.md

+107-16
Original file line numberDiff line numberDiff line change
@@ -239,14 +239,14 @@
239239
|231| [What are the types of feature modules?](#what-are-the-types-of-feature-modules)|
240240
|232| [What is a provider?](#what-is-a-provider)|
241241
|233| [What is the recommendation for provider scope?](#what-is-the-recommendation-for-provider-scope#)|
242-
|234| [?](#)|
243-
|235| [?](#)|
244-
|236| [?](#)|
245-
|237| [?](#)|
246-
|238| [?](#)|
247-
|239| [?](#)|
248-
|240| [?](#)|
249-
|241| [?](#)|
242+
|234| [How do you restrict provider scope to a module?](#how-do-you-restrict-provider-scope-to-a-module)|
243+
|235| [How do you provide a singleton service?](#how-do-you-provide-a-singleton-service)|
244+
|236| [What are the different ways to remove duplicate service registration?](#what-are-the-different-ways-to-remove-duplicate-service-registration)|
245+
|237| [How does forRoot method helpful to avoid duplicate router instances?](#how-does-forroot-method-helpful-to-avoid-duplicate-router-instances)|
246+
|238| [What is a shared module?](#what-is-a-shared-module)|
247+
|239| [Can I share services using modules?](#can-i-share-services-using-modules)|
248+
|240| [How do you get current direction for locales??](#how-do-you-get-current-direction-for-locales)|
249+
|241| [What is ngcc?](#what-is-ngcc)|
250250
|242| [?](#)|
251251
|243| [?](#)|
252252
|244| [?](#)|
@@ -3426,35 +3426,126 @@
34263426
34273427
**[⬆ Back to Top](#table-of-contents)**
34283428
3429-
234. ### ?
3429+
234. ### How do you restrict provider scope to a module?
3430+
It is possible to restrict service provider scope to a specific module instead making available to entire application. There are two possible ways to do it.
3431+
1. **Using providedIn in service:**
3432+
```js
3433+
import { Injectable } from '@angular/core';
3434+
import { SomeModule } from './some.module';
3435+
3436+
@Injectable({
3437+
providedIn: SomeModule,
3438+
})
3439+
export class SomeService {
3440+
}
3441+
```
3442+
2. **Declare provider for the service in module:**
3443+
```js
3444+
import { NgModule } from '@angular/core';
3445+
3446+
import { SomeService } from './some.service';
3447+
3448+
@NgModule({
3449+
providers: [SomeService],
3450+
})
3451+
export class SomeModule {
3452+
}
3453+
```
34303454
34313455
**[⬆ Back to Top](#table-of-contents)**
34323456
3433-
235. ### ?
3457+
235. ### How do you provide a singleton service?
3458+
There are two possible ways to provide a singleton service.
3459+
1. Set the providedIn property of the @Injectable() to "root". This is the preferred way(starting from Angular 6.0) of creating a singleton service since it makes your services tree-shakable.
3460+
```js
3461+
import { Injectable } from '@angular/core';
3462+
3463+
@Injectable({
3464+
providedIn: 'root',
3465+
})
3466+
export class MyService {
3467+
}
3468+
```
3469+
2. Include the service in root module or in a module that is only imported by root module. It has been used to register services before Angular 6.0.
3470+
```js
3471+
@NgModule({
3472+
...
3473+
providers: [MyService],
3474+
...
3475+
})
3476+
```
34343477
34353478
**[⬆ Back to Top](#table-of-contents)**
34363479
3437-
236. ### ?
3480+
236. ### What are the different ways to remove duplicate service registration?
3481+
If a module defines provides and declarations then loading the module in multiple feature modules will duplicate the registration of the service. Below are the different ways to prevent this duplicate behavior.
3482+
1. Use the providedIn syntax instead of registering the service in the module.
3483+
2. Separate your services into their own module.
3484+
3. Define forRoot() and forChild() methods in the module.
34383485
34393486
**[⬆ Back to Top](#table-of-contents)**
34403487
3441-
237. ### ?
3488+
237. ### How does forRoot method helpful to avoid duplicate router instances?
3489+
If the `RouterModule` module didn’t have forRoot() static method then each feature module would instantiate a new Router instance, which leads to broken application due to duplicate instances. After using forRoot() method, the root application module imports RouterModule.forRoot(...) and gets a Router, and all feature modules import RouterModule.forChild(...) which does not instantiate another Router.
34423490
34433491
**[⬆ Back to Top](#table-of-contents)**
34443492
3445-
238. ### ?
3493+
238. ### What is a shared module?
3494+
The Shared Module is the module in which you put commonly used directives, pipes, and components into one module that is shared(import it) throughout the application. For example, the below shared module imports CommonModule, FormsModule for common directives and components, pipes and directives based on the need,
3495+
```js
3496+
import { CommonModule } from '@angular/common';
3497+
import { NgModule } from '@angular/core';
3498+
import { FormsModule } from '@angular/forms';
3499+
import { UserComponent } from './user.component';
3500+
import { NewUserDirective } from './new-user.directive';
3501+
import { OrdersPipe } from './orders.pipe';
3502+
3503+
@NgModule({
3504+
imports: [ CommonModule ],
3505+
declarations: [ UserComponent, NewUserDirective, OrdersPipe ],
3506+
exports: [ UserComponent, NewUserDirective, OrdersPipe,
3507+
CommonModule, FormsModule ]
3508+
})
3509+
export class SharedModule { }
3510+
```
34463511
34473512
**[⬆ Back to Top](#table-of-contents)**
34483513
3449-
239. ### ?
3514+
239. ### Can I share services using modules?
3515+
No, it is not recommended to share services by importing module. i.e Import modules when you want to use directives, pipes, and components only. The best approach to get a hold of shared services is through 'Angular dependency injection' because importing a module will result in a new service instance.
34503516
34513517
**[⬆ Back to Top](#table-of-contents)**
34523518
3453-
240. ### ?
3519+
240. ### How do you get current direction for locales?
3520+
In Angular 9.1, the API method `getLocaleDirection` can be used to get the current direction in your app. This method is useful to support Right to Left locales for your Internationalization based applications.
3521+
```js
3522+
import { getLocaleDirection, registerLocaleData } from '@angular/common';
3523+
import { LOCALE_ID } from '@angular/core';
3524+
import localeAr from '@angular/common/locales/ar';
3525+
3526+
...
3527+
3528+
constructor(@Inject(LOCALE_ID) locale) {
3529+
3530+
const directionForLocale = getLocaleDirection(locale); // Returns 'rtl' or 'ltr' based on the current locale
3531+
registerLocaleData(localeAr, 'ar-ae');
3532+
const direction = getLocaleDirection('ar-ae'); // Returns 'rtl'
3533+
3534+
// Current direction is used to provide conditional logic here
3535+
}
3536+
```
34543537
34553538
**[⬆ Back to Top](#table-of-contents)**
34563539
3457-
241. ### ?
3540+
241. ### What is ngcc?
3541+
The ngcc(Angular Compatibility Compiler) is a tool which upgrades node_module compiled with non-ivy ngc into ivy compliant format. The `postinstall` script from package.json will make sure your node_modules will be compatible with the Ivy renderer.
3542+
```js
3543+
"scripts": {
3544+
"postinstall": "ngcc"
3545+
}
3546+
```
3547+
3548+
Whereas, Ivy compiler (ngtsc), which compiles Ivy-compatible code.
34583549
34593550
**[⬆ Back to Top](#table-of-contents)**
34603551

0 commit comments

Comments
 (0)