What are the @NgModule Metadata Properties?

The @NgModule decorator identifies AppModule as a NgModule class.

The @NgModule takes a metadata object that tells Angular how to compile and launch the application.

The NgModule’s important metadata properties are as follows –

1. providers

2. declarations

3. imports

4. exports

5. entryComponents

6. bootstrap

7. schemas

8. id

The @NgModule class with the decorator and metadata properties -

@NgModule({

providers?: Provider[]

declarations?: Array<Type<any> | any[]>

imports?: Array<Type<any> | ModuleWithProviders | any[]>

exports?: Array<Type<any> | any[]>

entryComponents?: Array<Type<any> | any[]>

bootstrap?: Array<Type<any> | any[]>

schemas?: Array<SchemaMetadata | any[]>

id?: string

})

Let understand in detail about NgModule metadata is as follows-

Providers – A list of dependency injection (DI) providers and it defines the set of injectable objects that are available in the injector of this module.

Declarations - A list of declarable classes, components, directives, and pipes that belong to this module. The compiler throws an error if you try to declare the same class in multiple modules.

Imports - A list of modules and it used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom made feature module.

Exports - A list of declarable components, directives, pipes, and modules that an importing module can be used within a template of any component.

EntryComponents - A list of components that should be compiled when this module is defined. By default, an Angular app always has at least one entry component, the root component, AppComponent.

A bootstrapped component is an entry component that Angular loads into DOM during the application launch and other root components loaded dynamically into entry components.

Bootstrap – A list of components that are automatically bootstrapped and the listed components will be added automatically to entryComponents.

Schemas - Defines a schema that will allow any non-Angular elements and properties.

Id – The Id used to identify the modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.

By Anil Singh | Rating of this article (*****)

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1: To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideClientHydration(), provideHttpClient () ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVA...

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'. Follow the below steps, Steps 1 – Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like – NPM Command 1 -> npm install crypto-js --save NPM Command 2 -> npm install @types/crypto-js --save Steps 2 - Add the script path in “ angular.json ” file. "scripts" : [ "../node_modules/crypto-js/crypto-js.js" ] Steps 3 – Create a service class “ EncrDecrService ” for encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using encrypt and decrypt get/set methods . import { Injectable } from ...

How To convert JSON Object to String?

To convert JSON Object to String - To convert JSON Object to String in JavaScript using “JSON.stringify()”. Example – let myObject =[ 'A' , 'B' , 'C' , 'D' ] JSON . stringify ( myObject ); ü Stayed Informed – Object Oriented JavaScript Interview Questions I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

Angular Testing Questions and Answers | 9, 8, 7, 6

What Is Testing? The testing is a tools and techniques for a unit and integration testing Angular applications . Why Test? Tests are the best ways to prevent software bugs and defects. How to Setup Test in Angular Project? Angular CLI install everything you need to test an Angular application. This CLI command takes care of Jasmine and karma configuration for you. Run this CLI command- ng test The test file extension must be “.spec.ts” so that tooling can identify the test file. You can also unit test your app using other testing libraries and test runners. Types of Test – The all great developer knows his/her testing tools use. Understanding your tools for testing is essential before diving into writing tests. The Testing depends on your project requirements and the project cost. The types of Testing looks like - 1. Unit Test 2. Integration Test 3. En...

Anil Singh | Code-sample.com

Search This Blog