Skip to content

Commit 22a120b

Browse files
sudheerjsudheerj
committed
Add module questions
1 parent 30058eb commit 22a120b

File tree

2 files changed

+210
-7
lines changed

2 files changed

+210
-7
lines changed

‎README.md

Lines changed: 210 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,38 @@
225225
|217| [What is a routed entry component?](#what-is-a-routed-entry-component#)|
226226
|218| [Why is not necessary to use entryComponents array every time?](#why-is-not-necessary-to-use-entrycomponents-array-every-time)|
227227
|219| [Do I still need to use entryComponents array in Angular9?](do-i-still-need-to-use-entrycomponents-array-in-angular9#)|
228-
|220| [?](#)|
229-
|221| [?](#)|
230-
|222| [?](#)|
228+
|220| [Is it all components generated in production build?](#is-it-all-components-generated-in-production-build)|
229+
|221| [What is Angular compiler?](#what-is-angular-compiler)|
230+
|222| [What is the role of ngModule metadata in compilation process?](#what-is-the-role-of-ngmodule-metadata-in-compilation-process)|
231+
|223| [How does angular finds components, directives and pipes?](#how-does-angular-finds-components-directives-and-pipes)|
232+
|224| [Give few examples for NgModules?](#give-few-examples-for-ngmodules)|
233+
|225| [What are feature modules?](#what-are-feature-modules)|
234+
|226| [What are the imported modules in CLI generated feature modules?](#what-are-the-imported-modules-in-cli-generated-feature-modules)|
235+
|227| [What are the differences between ngmodule and javascript module?](#what-are-the-differences-between-ngmodule-and-javascript-module)|
236+
|228| [What are the possible errors with declarations?](#what-are-the-possible-errors-with-declarations)|
237+
|229| [What are the steps to use declaration elements?](#what-are-the-steps-to-use-declaration-elements)|
238+
|230| [What happens if browserModule used in feature module?](#what-happens-if-browsermodule-used-in-feature-module)|
239+
|231| [What are the types of feature modules?](#what-are-the-types-of-feature-modules)|
240+
|232| [?](#)|
241+
|233| [?](#)|
242+
|234| [?](#)|
243+
|235| [?](#)|
244+
|236| [?](#)|
245+
|237| [?](#)|
246+
|238| [?](#)|
247+
|239| [?](#)|
248+
|240| [?](#)|
249+
|241| [?](#)|
250+
|242| [?](#)|
251+
|243| [?](#)|
252+
|244| [?](#)|
253+
|245| [?](#)|
254+
|246| [?](#)|
255+
|247| [?](#)|
256+
|248| [?](#)|
257+
|249| [?](#)|
258+
|250| [?](#)|
259+
|251| [?](#)|
231260

232261

233262
1. ### What is Angular Framework?
@@ -2095,7 +2124,14 @@
20952124
**[⬆ Back to Top](#table-of-contents)**
20962125
20972126
127. ### What is declarable in Angular?
2098-
Declarable is a class type that you can add to the declarations list of an NgModule. The class types such as components, directives, and pipes comes can be declared in the module.
2127+
Declarable is a class type that you can add to the declarations list of an NgModule. The class types such as components, directives, and pipes comes can be declared in the module. The structure of declarations would be,
2128+
```javascript
2129+
declarations: [
2130+
YourComponent,
2131+
YourPipe,
2132+
YourDirective
2133+
],
2134+
```
20992135
21002136
**[⬆ Back to Top](#table-of-contents)**
21012137
@@ -3268,14 +3304,181 @@
32683304
32693305
**[⬆ Back to Top](#table-of-contents)**
32703306
3271-
220. ### ?
3307+
220. ### Is it all components generated in production build?
3308+
No, only the entry components and template components appears in production builds. If a component isn't an entry component and isn't found in a template, the tree shaker will throw it away. Due to this reason, make sure to add only true entry components to reduce the bundle size.
3309+
3310+
**[⬆ Back to Top](#table-of-contents)**
3311+
3312+
221. ### What is Angular compiler?
3313+
The Angular compiler is used to convert the application code into JavaScript code. It reads the template markup, combines it with the corresponding component class code, and emits component factories which creates JavaScript representation of the component along with elements of @Component metadata.
3314+
3315+
**[⬆ Back to Top](#table-of-contents)**
3316+
3317+
222. ### What is the role of ngModule metadata in compilation process?
3318+
The `@NgModule` metadata is used to tell the Angular compiler what components to be compiled for this module and how to link this module with other modules.
3319+
3320+
**[⬆ Back to Top](#table-of-contents)**
3321+
3322+
223. ### How does angular finds components, directives and pipes?
3323+
The Angular compiler finds a component or directive in a template when it can match the selector of that component or directive in that template. Whereas it finds a pipe if the pipe's name appears within the pipe syntax of the template HTML.
3324+
3325+
**[⬆ Back to Top](#table-of-contents)**
3326+
3327+
224. ### Give few examples for NgModules?
3328+
The Angular core libraries and third-party libraries are available as NgModules.
3329+
1. Angular libraries such as FormsModule, HttpClientModule, and RouterModule are NgModules.
3330+
2. Many third-party libraries such as Material Design, Ionic, and AngularFire2 are NgModules.
3331+
3332+
**[⬆ Back to Top](#table-of-contents)**
3333+
3334+
225. ### What are feature modules?
3335+
Feature modules are NgModules, which are used for the purpose of organizing code. The feature module can be created with Angular CLI using the below command in the root directory,
3336+
```javascript
3337+
ng generate module MyCustomFeature //
3338+
```
3339+
Angular CLI creates a folder called `my-custom-feature` with a file inside called `my-custom-feature.module.ts` with the following contents
3340+
```javascript
3341+
import { NgModule } from '@angular/core';
3342+
import { CommonModule } from '@angular/common';
3343+
3344+
@NgModule({
3345+
imports: [
3346+
CommonModule
3347+
],
3348+
declarations: []
3349+
})
3350+
export class MyCustomFeature { }
3351+
```
3352+
**Note:** The "Module" suffix shouldn't present in the name because the CLI appends it.
3353+
**[⬆ Back to Top](#table-of-contents)**
3354+
3355+
226. ### What are the imported modules in CLI generated feature modules?
3356+
In the CLI generated feature module, there are two JavaScript import statements at the top of the file
3357+
1. NgModule: InOrder to use the `@NgModule` decorator
3358+
2. CommonModule: It provides many common directives such as `ngIf` and `ngFor`.
3359+
3360+
**[⬆ Back to Top](#table-of-contents)**
3361+
3362+
227. ### What are the differences between ngmodule and javascript module?
3363+
Below are the main differences between Angular NgModule and javascript module,
3364+
3365+
| NgModule | JavaScript module |
3366+
|---- | --------- |
3367+
| NgModule bounds declarable classes only | There is no restriction classes |
3368+
| List the module's classes in declarations array only | Can define all member classes in one giant file |
3369+
| It only export the declarable classes it owns or imports from other modules| It can export any classes |
3370+
| Extend the entire application with services by adding providers to provides array | Can't extend the application with services |
3371+
3372+
**[⬆ Back to Top](#table-of-contents)**
3373+
3374+
228. ### What are the possible errors with declarations?
3375+
There are two common possible errors with declarations array,
3376+
1. If you use a component without declaring it, Angular returns an error message.
3377+
2. If you try to declare the same class in more than one module then compiler emits an error.
3378+
3379+
**[⬆ Back to Top](#table-of-contents)**
3380+
3381+
229. ### What are the steps to use declaration elements?
3382+
Below are the steps to be followed to use declaration elements.
3383+
1. Create the element(component, directive and pipes) and export it from the file where you wrote it
3384+
2. Import it into the appropriate module.
3385+
3. Declare it in the @NgModule declarations array.
3386+
3387+
3388+
**[⬆ Back to Top](#table-of-contents)**
3389+
3390+
230. ### What happens if browserModule used in feature module?
3391+
If you do import `BrowserModule` into a lazy loaded feature module, Angular returns an error telling you to use `CommonModule` instead. Because BrowserModule’s providers are for the entire app so it should only be in the root module, not in feature module. Whereas Feature modules only need the common directives in CommonModule.
3392+
![ScreenShot](images/browser-module-error.png)
3393+
3394+
**[⬆ Back to Top](#table-of-contents)**
3395+
3396+
231. ### What are the types of feature modules?
3397+
Below are the five categories of feature modules,
3398+
1. **Domain:** Deliver a user experience dedicated to a particular application domain(For example, place an order, registration etc)
3399+
2. **Routed:** These are domain feature modules whose top components are the targets of router navigation routes.
3400+
3. **Routing:** It provides routing configuration for another module.
3401+
4. **Service:** It provides utility services such as data access and messaging(For example, HttpClientModule)
3402+
5. **Widget:** It makes components, directives, and pipes available to external modules(For example, third-party libraries such as Material UI)
3403+
3404+
**[⬆ Back to Top](#table-of-contents)**
3405+
3406+
231. ### ?
3407+
3408+
**[⬆ Back to Top](#table-of-contents)**
3409+
3410+
232. ### ?
3411+
3412+
**[⬆ Back to Top](#table-of-contents)**
3413+
3414+
233. ### ?
3415+
3416+
**[⬆ Back to Top](#table-of-contents)**
3417+
3418+
234. ### ?
3419+
3420+
**[⬆ Back to Top](#table-of-contents)**
3421+
3422+
235. ### ?
3423+
3424+
**[⬆ Back to Top](#table-of-contents)**
3425+
3426+
236. ### ?
3427+
3428+
**[⬆ Back to Top](#table-of-contents)**
3429+
3430+
237. ### ?
3431+
3432+
**[⬆ Back to Top](#table-of-contents)**
3433+
3434+
238. ### ?
3435+
3436+
**[⬆ Back to Top](#table-of-contents)**
3437+
3438+
239. ### ?
3439+
3440+
**[⬆ Back to Top](#table-of-contents)**
3441+
3442+
240. ### ?
3443+
3444+
**[⬆ Back to Top](#table-of-contents)**
3445+
3446+
241. ### ?
3447+
3448+
**[⬆ Back to Top](#table-of-contents)**
3449+
3450+
242. ### ?
3451+
3452+
**[⬆ Back to Top](#table-of-contents)**
3453+
3454+
243. ### ?
3455+
3456+
**[⬆ Back to Top](#table-of-contents)**
3457+
3458+
244. ### ?
3459+
3460+
**[⬆ Back to Top](#table-of-contents)**
3461+
3462+
245. ### ?
3463+
3464+
**[⬆ Back to Top](#table-of-contents)**
3465+
3466+
246. ### ?
3467+
3468+
**[⬆ Back to Top](#table-of-contents)**
3469+
3470+
247. ### ?
3471+
3472+
**[⬆ Back to Top](#table-of-contents)**
3473+
3474+
248. ### ?
32723475
32733476
**[⬆ Back to Top](#table-of-contents)**
32743477
3275-
221. ### ?
3478+
249. ### ?
32763479
32773480
**[⬆ Back to Top](#table-of-contents)**
32783481
3279-
222. ### ?
3482+
250. ### ?
32803483
32813484
**[⬆ Back to Top](#table-of-contents)**

‎images/browser-module-error.gif

21.1 KB
Loading

0 commit comments

Comments
 (0)