After upgrading from Angular 7 to 12, the module './rest.service.interface' does not export 'RestService' (imported as 'RestService'), causing it to not be found

Hey everyone, I've been struggling with a problem for hours now and I can't seem to fix it. Here is the interface I'm working with:

import { HttpClient } from '@angular/common/http';
import { Response } from '@angular/http';
import { L10nTranslationService } from 'angular-l10n';
import { Observable } from 'rxjs';
import { APIConfigService } from '../../api.config.service';

import { AuthService } from '../../shared/auth.service';
import { LoggerService } from '../../shared/logger.service';
import { Kernantwort } from '../../shared/response/kernantwort.model'; 
import { OaseListe } from './oaseliste.model';

export declare class RestService {
  //...Content of the interface

And here is how I've implemented this interface:

import { Injectable } from '@angular/core';
import { Response, ResponseType } from '@angular/http';
//...Other imports

const PATH_FILE = 'app/protected/immerdrin/rest.service.impl.ts';

@Injectable()
export class RestServiceImpl extends RestService {
  //...Implementation details

Upon trying to launch the application, I encounter the following error:

Error: ./src/app/protected/immerdrin/rest.service.impl.ts:19:32-43 - export 'RestService' (imported as 'RestService') was not found in './rest.service.interface' (module has no exports)

I have no idea why this error is happening. The code worked fine in Angular 7 but after updating to Angular 12, I'm facing this issue. Can anyone provide some insight or help?

Thank you, OASE

Answer №1

Is it possible that the issue arises from using the following syntax:

export class RestServiceImpl extends RestService

instead of:

export class RestServiceImpl implement RestService

Alternatively, when defining this:

export declare class RestService {

consider declaring an interface instead:

export declare interface RestService {

You might even want to experiment with combining both solutions simultaneously.

Answer №2

In order to resolve the issue at hand, I made a modification to the definition of the RestService as shown below. By implementing this updated definition, the code now compiles successfully in Angular 12:

import { Response } from '@angular/http';
import { Observable } from 'rxjs';
import { Kernantwort } from '../../shared/response/kernantwort.model';
import { OaseListe } from './oaseliste.model';

//
export abstract class RestService {
  isRequestRunning: boolean;
  fehler: Kernantwort;
  apiUrlPrefix: string;
  apiUrlListId: string;
  API_LIST: string;
  API_CREATE: string;
  API_UPDATE: string;
  API_DELETE: string;
  abstract init(): any;
  abstract liste(page: number, size: number, sort: string, sortdirection: string, search: string): Observable<OaseListe<any>>;
  abstract speichernAendern(element: any): Observable<any>;
  abstract loeschen(id: number): Observable<any>;
  abstract handleError(error: Response | any, prefix: string): Kernantwort;
  abstract getApiBaseUrl(): string;
  abstract getApiUrl(): string;
}

By transitioning the Class into an abstract class, it necessitated the removal of the constructor Method since it is not permissible in an abstract class.

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

Angular - Bootstrap 5 Slidehow is malfunctioning

I'm having trouble with the Bootstrap Carousel in Angular (17). The Previous & Next buttons don't seem to be working as expected. The carousel seems to be stuck on the first image and I'm not getting any errors in the console. I've ...

Steps for utilizing a Get() method to view a response within Angular

I am having trouble with implementing an API call on a page and I'm unsure about what's wrong with the Subscribe/Observe method. Currently, this is the code that I have: import { Component, OnInit } from '@angular/core'; import { Ro ...

I am interested in incorporating apexcharts and ng-apexcharts into Angular 18 with server-side rendering (SSR)

I am facing an issue while trying to integrate apexcharts and ng-apexcharts in Angular 18 with SSR. The problem I encounter is: The error "window is not defined" is thrown at node_modules/apexcharts/dist/apexcharts.common.js (c:/Users/lakhm/Desktop/cod ...

Using Typescript and React to retrieve the type of a variable based on its defined type

Just getting started with Typescript and could use some guidance. Currently, I'm using React to develop a table component with the help of this library: Let's say there's a service that retrieves data: const { data, error, loading, refetc ...

Tips for fixing type declaration in a generic interface

Here is a simple function that constructs a tree structure. interface CommonItem { id: string parent: string | null } interface CommonTreeItem { children: CommonTreeItem[] } export const generateTree = <Item extends CommonItem, TreeItem extends ...

Discovering the position of an element within an array and leveraging that position to retrieve a corresponding value from a separate array

const STATE = ["TEXAS","CALIFORNIA","FLORIDA","NEW YORK"] const STATE_CODE = ["TX","CA","FL","NY"] With two arrays provided, the first array is displayed in a dropdown menu. The challenge is to retrieve the corresponding state code from the second array ...

Why do I keep receiving a <prototype> object for each API request?

Currently, I am utilizing JSONPlaceholder in conjunction with Angular as part of my learning process. While I have been following the documentation meticulously and obtaining the correct output, there seems to be an additional element accompanying each obj ...

Tips for effectively simulating the formik useFormikContext function while writing unit tests using jest

I've created a simple component (shown below) that aims to fetch data from the Formik FormContext using the useFormikContext hook. However, I'm facing some challenges when writing unit tests for this component. It requires me to mock the hook, w ...

Jest is simulating a third-party library, yet it is persistently attempting to reach

Here's a function I have: export type SendMessageParameters = { chatInstance?: ChatSession, // ... other parameters ... }; const sendMessageFunction = async ({ chatInstance, // ... other parameters ... }: SendMessageParameters): Promise<vo ...

Multiple Invocations of Angular Observable Service

I am facing an issue with my service method that returns an observable. In my component, I subscribe to this observable when it is loaded and have added a console.log in the service to track each time it is called. Upon running my application and checking ...

I am interested in creating a versatile validation system that can be applied to any Angular form. The standard reactive approach is already completed and functioning effectively

I am looking for a way to implement generic validation in Angular forms that can be used across different components. The basic reactive form is already set up and running smoothly, but I need assistance with implementing a more versatile approach. Can a ...

Tips for restricting User access and displaying specific sections of the menu

I have a component that utilizes map to display all menu parts. Is there a way to make certain parts of the menu hidden if the user's access rights are equal to 0? const Aside: React.FunctionComponent = () => { const[hasRight, setHasRight] = us ...

I'm looking to inject both default static values and dynamic values into React's useForm hook. But I'm running into a TypeScript type error

Below is the useForm code I am using: const { register, handleSubmit, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ defaultValues: { celebUid, //props fanUid, // props price, // props ...

Ways to enhance a component by utilizing ChangeDetectorRef for one of its dependencies

I am in the process of expanding a component and one of its dependencies is ChangeDetectorRef export class CustomBgridComponent extends GridComponent implements OnInit { @Input() exportFileName: string = ''; constructor( ..., change ...

How can JSON be best connected in Angular for optimal performance?

My JSON structure is as follows: { items:[], errors:[], foundItems:9 } One part of my program requires access to "items", while another part needs access to "errors." To resolve this issue, I decided to create a new interface and a new class to hand ...

Allow only numerical values through an ion-input in Ionic 4, preventing the input of letters and special characters

I am currently developing an application in Ionic 4 that requires users to enter only integer numbers (0-9). I need to prevent any other characters such as alphabets, dots, or plus signs from being entered. However, the methods I have tried so far have not ...

Is there a way to ensure an ajax call finishes executing without relying on 'async: false' or callbacks?

In my view, I have implemented a TypeScript code defining a KnockoutJS binding handler for a clickable element as shown below: module MyModule { export interface ICopyButtonParams { dataUrl: string; } ko.bindingHandlers.copyButton = { ...

Exploring the power of a mapped type within a tuple

Can TypeScript ensure the validity of key-value tuples in this function? function arrayToObject(array, mapper) { const result = {}; for(const item of array) { const [key, value] = mapper(item); result[key] = value; } return ...

Tips to decrease the bundle size of Angular 2 with WebPack

After experimenting with various Angular 2 seed projects utilizing WebPack, I noticed that when I compile the bundle for production, the resulting file size is around 3MB. Is there a way to minimize the size of this file? An example of one of these proje ...

Creating Production Files for Web using RxJs and TypeScript

I am interested in developing a JavaScript Library using RxJs (5.0.0-Beta.6) and TypeScript (1.8.10). My TypeScript file is successfully compiling. Below are the files I have: MyLib.ts: /// <reference path="../../typings/globals/es6-shim/index.d.ts" ...