Encountering Compilation Error When Using RxJS Observable with Angular 6 and Swagger Codegen

Encountering TypeScript compiler errors related to rxjs while working with Angular 6 and Swagger Codegen:


Cannot find module 'rxjs-compat/Observable'

Referenced the following link for assistance: https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#rxjs-v5x-to-v6-update-guide

Operating on a macOS with swagger-codegen: stable 2.3.1 (installed via brew).

Any help would be greatly appreciated.

Update -----------------------

Solved the issue by including rxjs-compat in my Angular 6 project using the command:


npm install --save-dev rxjs-compat

Compiler warnings persist, but the errors are resolved and the project runs smoothly now.

angulartypescriptswaggercodegenrxjs6

Answer №1

If you are transitioning from a previous version of Angular, refer to the following guide:

https://update.angular.io/

The rxjs-compat package is used for maintaining compatibility with older rxjs implementations. For example: 

import { concat } from 'rxjs/observable/concat'

However, this should be updated to the new implementation that accompanies version 6. For instance:

import { catchError, map, switchMap } from 'rxjs/operators';

Therefore, you will need to modify the usage of your observable operators by incorporating the pipe method. For example: 

this.sampleService
      .search(
        payload.firstName,
        payload.lastName,
        payload.dateOfBirth
      )
      .pipe(
        map(response => new sampleActions.SearchSuccess(response.json())),
        catchError(error => of(new sampleActions.SearchFail(error)))
      )

It is evident that the operators map and catchError now have an alternative implementation using the pipe operator.

You may want to provide a copy of the logs to facilitate troubleshooting any occurring errors or warnings.

Answer №3

In my experience, I utilized the "swagger-codegen-cli-2.4.0.jar" for generation purposes. To address any "rxjs" related problems, I included the following line at the conclusion of the command:

--additional-properties ngVersion=6

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

Pair two values from the interface

I need to extract and combine two values from an Interface: export interface CurrenciesList { currency: string; country: string; } The initial mapping looks like this: this.optionValues["currency"] = value.map(i => ({ id: i.currency, name: i.curr ...

angulartypescript

How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available: 1. The ability to add or remove rows 2. Adding data into a row using different controls such as combo-boxes, text boxes, etc. One of the controls is a text box labeled "Additional Information ...

htmlangulartypescriptangular-material

I am completely baffled by the meaning of this Typescript error

In my code, there is a button component setup like this: export interface ButtonProps { kind?: 'normal' | 'flat' | 'primary'; negative?: boolean; size?: 'small' | 'big'; spinner?: boolean; ...

typescript

Performing DTO validation in the controller before passing data to the service

My current challenge involves implementing validation in a PUT request to update data stored in MongoDB: DTO: export enum reportFields { 'startDate', 'targetDateOfCompletion', 'duration', } export class updateS ...

mongodbtypescriptvalidationnestjsdto

What is the preferred method for validating an Angular form - ng-model or form input name?

When it comes to validating an input field and providing feedback, there are two methods that I have noticed: <form name="myform" ng-submit="myform && myFunc()"> <input name="foo" ng-model="foo" ...

angularangular-validation

Consecutive API requests within React context

When I'm developing locally, I encounter the error message Error: Rendered more hooks than during the previous render. in my application when refreshing the page. I suspect this is happening because I am making two calls within my provider. The first ...

reactjstypescript

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

A recent challenge arose when attempting to utilize two different versions of an API. The approach involved checking for a 404 error with version v2, and if found, falling back to version v1. The plan was to create separate async thunk actions for each ver ...

javascriptreactjstypescriptreduxredux-toolkit

Facing issues using Angular 5 for PUT requests due to 401 errors

When attempting to update data using the PUT Method in my angular service and express routes, I encountered a 401 error. Here is my service code: //401 makeAdmin(_id) { this.loadToken() let headers = new Headers() headers.append('Authorization& ...

javascriptangularexpress

Creating HTML code using an array of objects

My goal is to create HTML tags based on the object response shown below: "view": [{ "type": 'text', "depth": 0, "text": "This is a sample text" }] The objective here is to iterate through each type and add the corresponding HTML tags. &l ...

angular

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

htmlcssangularanimationfloating-action-button

The functionality of verifying the type of an item in a list using Typescript is not functioning

In my TypeScript code, I am working with a type called NameValue and another one called MixedStuff. type NameValue = { name: string; value: string }; type MixedStuff = NameValue | string; function stripTwoChars(stuffs: MixedStuff[]): string { let st ...

typescript

Struggling to dynamically update array values by comparing two arrays

I am faced with a scenario where I have two arrays within an Angular framework. One of the arrays is a regular array named A, containing values such as ['Stock_Number', 'Model', 'Type', 'Bill_Number'] The other arr ...

javascriptangulartypescript

Nock does not capture the requests - Error: Failed to resolve address ENOTFOUND

Let me provide an overview of the structure in place. Jest is utilized for executing the testing process. Within my jest.config.json file, I incorporate the following line: "globalSetup": "<rootDir>/__tests__/setup.js", Inside setup.js, you will ...

node.jstypescriptexpressjestjsnock

Retrieve values from DynamoDB in their original Number or String formats directly

Here is the code I am using to retrieve data from DynamoDB. async fetchData(params: QueryParams) { return await this.docClient.send(new QueryCommand(params)); } const dbObject: QueryParams = { TableName: process.env.TABLE_NAME, KeyCo ...

node.jstypescriptamazon-web-servicesamazon-dynamodb

Establish a local binding context within an Angular template

If I have a complex object structure that I need to bind to: <div>{{model.rootProperty}}</div> <div> <div>{{model.some.deeply.nested.property.with.a.donut.name}}</div> <div>{{model.some.deeply.nested.property.w ...

angularangular2-template

Preventing JavaScript Compilation for a Specific Folder using tsconfig: A Step-by-Step Guide

To create my own npx package, I'm currently working on converting my .ts files into .js. The purpose of the application is to generate TypeScript templates for users based on their selected options. In this app, there's a CLI called 'index.t ...

typescripttsconfigtsc

What is the best way to retrieve a nested data type?

I am working with an interface named IFoo interface IFoo { name: string; version: number; init: (arg1: string, arg2: number) => Promise<string[]>; } I am interested in the type of init. Is there a way to extract it so that I can use this i ...

typescripttypescript2.0

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

Seeking help to dynamically render a list of components that should expand or shrink based on values being added or removed from an array of custom objects. However, facing an issue where pushing a value into the array only replaces the previous value inst ...

javascriptarraysreactjstypescript

Creating a Personalized Color Palette Naming System with Material UI in TypeScript

I have been working on incorporating a custom color palette into my material ui theme. Following the guidance provided in the Material UI documentation available here Material UI Docs, I am trying to implement this feature. Here is an excerpt from my cod ...

reactjstypescriptmaterial-ui

Guidelines for Nestjs class-validator exception - implementing metadata information for @IsNotIn validator error handling

I have a NestJs data transfer object (dto) structured like this import { IsEmail, IsNotEmpty, IsNotIn } from 'class-validator'; import { AppService } from './app.service'; const restrictedNames = ['Name Inc', 'Acme Inc&ap ...

node.jstypescriptnestjsclass-validator