|
239 | 239 | |231| [What are the types of feature modules?](#what-are-the-types-of-feature-modules)|
|
240 | 240 | |232| [What is a provider?](#what-is-a-provider)|
|
241 | 241 | |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)| |
250 | 250 | |242| [?](#)|
|
251 | 251 | |243| [?](#)|
|
252 | 252 | |244| [?](#)|
|
|
3426 | 3426 |
|
3427 | 3427 | **[⬆ Back to Top](#table-of-contents)**
|
3428 | 3428 |
|
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 | + ``` |
3430 | 3454 |
|
3431 | 3455 | **[⬆ Back to Top](#table-of-contents)**
|
3432 | 3456 |
|
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 | + ``` |
3434 | 3477 |
|
3435 | 3478 | **[⬆ Back to Top](#table-of-contents)**
|
3436 | 3479 |
|
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. |
3438 | 3485 |
|
3439 | 3486 | **[⬆ Back to Top](#table-of-contents)**
|
3440 | 3487 |
|
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. |
3442 | 3490 |
|
3443 | 3491 | **[⬆ Back to Top](#table-of-contents)**
|
3444 | 3492 |
|
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 | + ``` |
3446 | 3511 |
|
3447 | 3512 | **[⬆ Back to Top](#table-of-contents)**
|
3448 | 3513 |
|
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. |
3450 | 3516 |
|
3451 | 3517 | **[⬆ Back to Top](#table-of-contents)**
|
3452 | 3518 |
|
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 | + ``` |
3454 | 3537 |
|
3455 | 3538 | **[⬆ Back to Top](#table-of-contents)**
|
3456 | 3539 |
|
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. |
3458 | 3549 |
|
3459 | 3550 | **[⬆ Back to Top](#table-of-contents)**
|
3460 | 3551 |
|
|
0 commit comments