The type 'angular' does not have a property of this kind

Question

The type 'angular' does not have a property of this kind

Having trouble importing a method into my Angular component.

An error keeps popping up:

Property 'alerta' does not exist on type 'typeof PasswordResetService'. any

I've double-checked the code and everything seems to be in order!

The issue arises in the password-reset.component.ts file where I'm trying to call that method.

import { PasswordResetService } from './password-reset.service';

@Component({
  selector: 'app-password-reset',
  templateUrl: './password-reset.component.html',
  styleUrls: ['./password-reset.component.css']
})
export class PasswordResetComponent implements OnInit {
  modalRef: BsModalRef; 
  constructor(private modalService: BsModalService) { }

  openAlertModal() {
    PasswordResetService.alerta("Title", "Message").subscribe((answer) => {});
  }

The problem lies within the openAlertModal() method...

If you review the PasswordResetService, everything appears to be fine:

export class PasswordResetService {
  BsModalRef: BsModalRef;

  constructor(private BsModalService: BsModalService) { }

  public alerta(title: string, message: string) : Observable<string> {
    const initialState = {
        title,
        message,
    };
    this.BsModalRef = this.BsModalService.show(AlertModalComponent, { initialState });
  
    return new Observable<string>(this.getAlertSubscriber());
  }

The alerta() method is definitely there!

Can anyone offer assistance with this?

Thank you!.

angular typescript

Answer 1

Answer №1

If you're looking to utilize a service, make sure to include it in the constructor. documentation

First, register the service in the module (app.module.ts)

import { PasswordResetService } from './password-reset.service'; // Specify the correct path

@NgModule({
  declarations: [
     // Your Components
  ],
  providers: [
     // Add your Password Reset service
     PasswordResetService
  ]
})

Next, import PasswordRestService into the necessary component

import { PasswordResetService } from './password-reset.service';

@Component({
    selector: 'app-password-reset',
    templateUrl: './password-reset.component.html',
    styleUrls: ['./password-reset.component.css']
})
export class PasswordResetComponent implements OnInit {
    modalRef: BsModalRef; 
    constructor(
    private modalService: BsModalService,
    private passwordResetService: PasswordResetService
    ) { }

    openAlertModal() {
    this.passwordResetService.alerta("Title", "Message").subscribe((response) => {});
    }
}

Answer 2

If you're looking to utilize a service, make sure to include it in the constructor. documentation

First, register the service in the module (app.module.ts)

import { PasswordResetService } from './password-reset.service'; // Specify the correct path

@NgModule({
  declarations: [
     // Your Components
  ],
  providers: [
     // Add your Password Reset service
     PasswordResetService
  ]
})

Next, import PasswordRestService into the necessary component

import { PasswordResetService } from './password-reset.service';

@Component({
    selector: 'app-password-reset',
    templateUrl: './password-reset.component.html',
    styleUrls: ['./password-reset.component.css']
})
export class PasswordResetComponent implements OnInit {
    modalRef: BsModalRef; 
    constructor(
    private modalService: BsModalService,
    private passwordResetService: PasswordResetService
    ) { }

    openAlertModal() {
    this.passwordResetService.alerta("Title", "Message").subscribe((response) => {});
    }
}

Answer 3

Answer №2

1.) To use the PasswordResetService as a standalone class, you need to instantiate it using the new keyword.

2.) If PasswordResetService is set up as an injectable service (using @Injectable decorator), remember to include it in the constructor for proper dependency injection.

Thank you.

Answer 4

1.) To use the PasswordResetService as a standalone class, you need to instantiate it using the new keyword.

2.) If PasswordResetService is set up as an injectable service (using @Injectable decorator), remember to include it in the constructor for proper dependency injection.

Thank you.

The type 'angular' does not have a property of this kind

Answer №1

Answer №2

Similar questions

Troubleshooting issues with sorting and pagination in Angular Material table functionality

Fixing the "Module not found" error in an Angular library using npm link

What is the method for extracting the types of parameters from a function type while excluding a single parameter?

Encountered a problem with regular expressions in Angular 2 - a Module parse error due to an octal literal in strict mode

A guide on iterating through various JSON arrays and displaying them in AngularJS

Generating a dynamic table using Angular

Using the keyof lookup in a Typescript interface is a powerful way to

Error with tsc rootDir due to Docker's installation of yarn in root directory

When attempting to Dockerize an Angular CLI app, nothing seemed to happen

Dealing with Errors in Angular 8: Best Practices for Handling Response Errors

Using Vue.js 2 on multiple HTML pages with Typescript and ASP.Net Core

How to Initialize Multiple Root Components in Angular 4 Using Bootstrap

Dealing with challenges in integrating ngx-masonry with Angular 14

Using RxJS to merge various HTTP requests into a unified and flattened observable array

Combining Typescript and React to create a conditional callback prop type depending on whether an optional prop is

What is the best way to streamline the creation of a "products filter" using Node.js and Angular?

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Why is the entire rxjs library included in the Angular 9 build bundle?

Filter multiple columns in an Angular custom table with a unique filterPredicate

Converting a file buffer to upload to Google Cloud Storage