When an Angular service is created, its properties are not immediately configured

My current task involves testing an Angular (4.1) service that looks like this:

@Injectable()
export class JobService {
  private answerSource = new Subject<AnswerWrapper>();
  answer$ = this.answerSource.asObservable(); 

  answer(answer: AnswerWrapper) {
    this.answerSource.next(answer);
  }

I am using the following unit test to validate the service:

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [JobService]
    });
  });

  it('should emit $answer on answer()', inject([JobService], (service: JobService) => {
    service.answer$.subscribe(val => expect(val).toEqual('test123'));
    service.answer(('test123' as any))
  }));

Despite my efforts, I encountered the error message:

Cannot read property 'subscribe' of undefined

I am puzzled by this because I believe everything should be properly set up during service creation. Any insights on why this could be happening?

Answer №1

Ensure to include this line within a constructor function

observableAnswer$ = this.answerSource.asObservable(); 

The answerSource Subject will be initialized prior to the execution of the constructor

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular6 returns the result after subscribing to an HTTP POST request

Currently, I am in the process of learning angular and attempting to create a component that allows users to register through my web API. Within my component, the code on form submission looks like this: onSubmit(contactFormRef: NgForm) { const resu ...

Setting up a Typescript project using webpack

Greetings! I am looking to set up Typescript with composite config and webpack (everything worked fine with just a single tsconfig.json). I must admit that I am new to TypeScript and have been more familiar with JavaScript. My main issue is getting the des ...

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

I've been working on creating a single-page website with a customized navbar using React instead of native JavaScript, similar to the example I found in this reference. My current setup includes a NavBar.tsx and App.tsx. The NavBar.tsx file consists o ...

What is the best way to access the rendered child components within a parent component?

I am seeking a way to retrieve only the visible child components within a parent component. Below is my unsuccessful pseudo-code attempt: parent.component.html <parent (click)="changeVisibility()"> <child *ngIf="visible1"></child> ...

Generate md-card components in real-time using data fetched from an API

I have a scenario where I make an API call to fetch user profiles, and I want to generate Angular Material Design md-cards dynamically for each profile. The number of profiles retrieved can vary, hence the need for dynamic card creation. Below is the comp ...

The interface is unable to populate the Array of Elements

When using Angular, I send a request and save the response in a variable: conversations: Conversation[]; // ChatService getConversations() { return this.http.get<Conversation[]>('/chat/conversations'); } this.chatService.getConversat ...

Angular Binding issue - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input' element, despite the property being present

I have developed a component class like the one below and I am attempting to link the class fields to the template, but encountered the following error: ERROR in src/app/admin/projects/projects.component.html: 41:34 - error NG8002: Can't bind to &ap ...

A comprehensive guide on constructing a literal object in Typescript by combining an array with an object

Recently, I came across this Typescript code snippet: type SortedList = T[] & {_brand: "sorted" }; function binarySearch<T>(xs: SortedList<T>, x: T): boolean let low = 0; let high = xs.length - 1; while (high ...

Set up Angular 2 Universal on your system

Update: I attempted to set up Angular 2 Universal following this guide, but encountered errors when executing the command below. Here is the command I ran: typings install node express body-parser serve-static dexpress-serve-static-core mime --global -- ...

Prior to the ngAfterContentInit hook being triggered, simulate class members

I am facing an issue with a component that queries its content child. Here's the code snippet: @ContentChild(InputControlDirective, { read: ElementRef }) public inputControl: ElementRef; To handle this, I have implemented the ngAfterContentInit hook ...

Experiencing an array of issues while attempting to convert my HTTP request into an

I am currently facing some difficulties in converting my HTTP requests into observables. Within my Angular App, there is a service called API Service which takes care of handling all the requests to the backend. Then, for each component, I have a separate ...

Angular micro front-end powered by module federation

I am interested in developing micro front-end applications using module federation. I have successfully implemented it following the guidelines provided on this informative page. However, I am facing a challenge where I want each project to have its own u ...

The canActivate function must be responsive to the true or false value of this.authService.isLoggedIn before proceeding

I am facing a problem with my app's routing functionality. When the user logs in with their Google email, I want the app to route to the home page: "". Everything seems to work fine except for the canActivate routeGuard. During the AuthLogin ...

The Angular4 HTTP POST method fails to send data to the web API

Whenever I make a http post request, it keeps returning an error message saying "data does not pass correctly". I have tried passing the data through the body and also attempted using json.stringify(). Additionally, I experimented with setting the content ...

Tips for utilizing PNG images in Next.js beyond the conventional PUBLIC folder

I have been trying to use images from a directory other than the Public folder by implementing the Next-Images library. Despite following the setup instructions in the documentation and watching various tutorials online, I am unable to load anything other ...

Error encountered during Angular upload using Asp.net core: System.Text.DecoderFallbackException is thrown when bytes [FF] cannot be translated at the specified index

I am having trouble uploading a file using Angular 7 and Asp.net core 2.2 I have set up the Angular web service to append the file and include a property Name. However, when I call the WebService from Angular, I encounter an error in the Asp.net core l ...

Is there a way to initiate a clean-up process once the debugger has been halted?

After spending hours creating unit tests for my library that manipulate a specific .html file, I realized the importance of backing up and restoring the file before and after the tests. I implemented the AssemblyCleanup attribute for the restoration proc ...

What is the reason that the command `npx create-react-app my-app --typescript` is not providing me with the expected TypeScript files?

I used the command npx create-react-app my-app --typescript to create my React project, but it seems like I still ended up with the default JavaScript boilerplate files. I was expecting to see files with a .tsx or .ts extension and use import * from as R ...

Angular's mechanism for detecting changes in a callback function for updates

I have come across a puzzling scenario regarding a basic issue. The situation involves a simple component with a boolean property that is displayed in the template of the component. When I update this property within a callback function, the property is up ...

How can we ensure that only one of two props is specified during compilation?

I've designed a customized Button component. interface Button { href?: string; action(): void; } I'm looking to ensure that when a consumer uses this Button, they can only pass either href or action as a prop, not both. I want TypeScri ...