Can classes be encapsulated within a NgModule in Angular 2/4?

Question

Can classes be encapsulated within a NgModule in Angular 2/4?

Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example:

human.ts (my class file)

export class Human {

  private numOfLegs: Number;

  constructor() {
    this.numOfLegs = 2;
  }
}

test.module.ts (my module file)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Human } from './human';

@NgModule({
  imports: [CommonModule],
  declarations: [
    Human
  ],
  providers: [],
  exports: [Human]
})
export class TestModule {}

Now, how do I create an instance of the Human class in a component? I've attempted importing it with both methods:

import { TestModule } from './test.module';

and

import { Human } from './test.module';

However, when trying new Human(), I encounter the error message "cannot find name Human". Any guidance on this issue would be greatly appreciated.

angular typescript ng-modules

Answer 1

Answer №1

Angular modules and ES6 / TypeScript / Node modules have distinct differences. Angular modules consist of Components, Services, and Directives, while ES6 modules typically involve classes.

To reuse your NgModule that relies on other non-Angular classes, you can export them as ES6 modules for use elsewhere. Create a file like export.ts or index.ts and include the necessary export statements -

export { TestModule } from './test.module';
export { Human } from './human';

When you need to utilize the NgModule in another location, import it using a command similar to the following -

import { TestModule } from '../lib/export';

Answer 2

Angular modules and ES6 / TypeScript / Node modules have distinct differences. Angular modules consist of Components, Services, and Directives, while ES6 modules typically involve classes.

To reuse your NgModule that relies on other non-Angular classes, you can export them as ES6 modules for use elsewhere. Create a file like export.ts or index.ts and include the necessary export statements -

export { TestModule } from './test.module';
export { Human } from './human';

When you need to utilize the NgModule in another location, import it using a command similar to the following -

import { TestModule } from '../lib/export';

Answer 3

Answer №2

It's important to note that providing a class in the declarations or exports section is not recommended. These sections are specifically for components, directives, and pipes, so adding a Human class there would be a mistake.

One option is to provide Human as a value provider instead of a class provider in the module. This means that it needs to be instantiated manually. This approach is ideal when a class requires non-DI arguments.

@NgModule({
  providers: [{ provide: Human, useValue: Human }]
})
export class TestModule {}

...

import { Human } from '...';

@Component(...)
class SomeComponent {
  constructor(@Inject(Human) human: typeof Human) {
    this.human = new Human();
  }
}

Alternatively, you can make Human a component provider. This will result in it being instantiated for each instance of the component. In this scenario, using TestModule becomes unnecessary. This method is typically preferred:

import { Human } from '...';

@Component({ providers: [Human], ... })
class SomeComponent {
  constructor(public human: Human) {}
}

In either case, remember to import the Human DI token in the component file where it's being used.

Answer 4

It's important to note that providing a class in the declarations or exports section is not recommended. These sections are specifically for components, directives, and pipes, so adding a Human class there would be a mistake.

One option is to provide Human as a value provider instead of a class provider in the module. This means that it needs to be instantiated manually. This approach is ideal when a class requires non-DI arguments.

@NgModule({
  providers: [{ provide: Human, useValue: Human }]
})
export class TestModule {}

...

import { Human } from '...';

@Component(...)
class SomeComponent {
  constructor(@Inject(Human) human: typeof Human) {
    this.human = new Human();
  }
}

Alternatively, you can make Human a component provider. This will result in it being instantiated for each instance of the component. In this scenario, using TestModule becomes unnecessary. This method is typically preferred:

import { Human } from '...';

@Component({ providers: [Human], ... })
class SomeComponent {
  constructor(public human: Human) {}
}

In either case, remember to import the Human DI token in the component file where it's being used.

Answer 5

Answer №3

Transform the Human class into an injectable and define it in the providers section of your testing module.

If your main app module eagerly loads the testing module, the providers specified in the testing module will be accessible in the app module, allowing you to inject Human into components from the root module.

The scenario changes if you opt for lazy loading of the testing module - in this case, they operate with their unique injectors and do not exchange providers with other modules.

@NgModule({
  imports: [CommonModule],
  providers: [Human]
})
export class TestModule {}

Assuming that you load the TestModule via router configuration:

@NgModule({
  imports: [ BrowserModule, TestModule,
    RouterModule.forRoot([
      {path: 'test', loadChildren: TestModule},
      )
  ],
    bootstrap:    [ AppComponent ]
})

In the AppComponent, you can now inject Human:

export class AppComponent {

  constructor(human: Human) {
    console.log(human.numOfLegs);
  }
}

Ensure that numOfLegs is set as public.

Answer 6

Transform the Human class into an injectable and define it in the providers section of your testing module.

If your main app module eagerly loads the testing module, the providers specified in the testing module will be accessible in the app module, allowing you to inject Human into components from the root module.

The scenario changes if you opt for lazy loading of the testing module - in this case, they operate with their unique injectors and do not exchange providers with other modules.

@NgModule({
  imports: [CommonModule],
  providers: [Human]
})
export class TestModule {}

Assuming that you load the TestModule via router configuration:

@NgModule({
  imports: [ BrowserModule, TestModule,
    RouterModule.forRoot([
      {path: 'test', loadChildren: TestModule},
      )
  ],
    bootstrap:    [ AppComponent ]
})

In the AppComponent, you can now inject Human:

export class AppComponent {

  constructor(human: Human) {
    console.log(human.numOfLegs);
  }
}

Ensure that numOfLegs is set as public.

Can classes be encapsulated within a NgModule in Angular 2/4?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best method for saving console.log output to a file?

Angular2 Uniqueness Validator: Ensuring Data Integrity

What is the best way to connect an event in Angular 2?

Using Angular Project: Exploring the Feasibility of Accessing SCSS Files from Node_modules in Custom Components

How can I store unique and only selected checkbox values in an array using Angular?

Tips for troubleshooting the 404 error on nginx servers

Navigating through Angular Material table elements

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

Is there a way to configure the currency symbols in App.module for GYD (Guyana Dollar) since the Angular Currency Pipe Symbol is not available for it

Errors encountered when attempting to update Angular from version 5 to version 6

Customize PrimeNG component styles

Tips for customizing Material UI's styled() SVG icon to accept SVG icon as a react component:

Running a method at any given time within an ngFor loop in Angular 5

A guide to effectively unit testing StripeJs within the Karma testing framework for Angular 8

The argument type 'MatSort | null' cannot be assigned to the parameter type 'MatSort' in this scenario

Is there an automatic bottom padding feature?

Identifying whether a particular area is represented in a geographic map array presents a significant challenge

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

Tips for creating an HTTP only cookie in NestJS