Accessing a function from a separate module in Angular 2

I am encountering an error message stating "has no exported member test" when trying to import test from ConfigAppProviderModule. Could there be a mistake in how I am writing the service with config in the module?

import { NgModule ,InjectionToken,Injectable } from '@angular/core';

export const ConfigToken = new InjectionToken<string>('ConfigToken');

class test {
  config:any;
  constructor(config){
    this.config = config; 
  }

  a(){
    console.log("this.config",this.config);
  }

}

const ConfigAppProvider = {
  provide: test,
  useFactory:  (config) => {
    return new test(config);
  },
  deps: [ ConfigToken]
};

@NgModule({
  providers: [ ConfigAppProvider ],
})
export class ConfigAppProviderModule {
  static initializeApp(config) {
    return {
      ngModule: ConfigAppProviderModule,
      providers: [
        { provide: ConfigToken, useValue: config }
      ]
    }
  }
}

Answer №1

The const ConfigAppProvider was not exported as required.

export const ConfigAppProvider = {
  provide: test,
  useFactory:  (config) => {
    return new test(config);
  },
  deps: [ CsbaseAppConfigToken ]
};

In addition, the class Test was also not exported properly.

export class Test 

Furthermore, it is important to decorate it with @Injectable().

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

When configuring Gatsby with Typescript, you may encounter the error message: "You cannot utilize JSX unless the '--jsx' flag is provided."

I am currently working on a Gatsby project and decided to implement Typescript into it. However, I encountered an error in my TSX files which reads: Cannot use JSX unless the '--jsx' flag is provided. What have I tried? I consulted the docume ...

Issue with validator pattern in one of the multiple validators not functioning as expected

When working with Angular, I encountered an issue with my field validation. Here is how I have defined the validators: [FormFields.field1]: ['', [Validators.maxLength(4), Validators.pattern('[0-9]')]], This code snippet is part of a l ...

Converting string literals to an array of enums

I have a scenario where I am getting the following data in an API response: { "roles": [ "ADMIN", "USER" ] } The response always includes an array of roles (USER, PRESENTER, ORGANIZER, and ADMIN). I am looking to transform this into a valid TypeScript a ...

An issue occurred when attempting to create a collapsible/expandable button within an Angular Material Nested Tree

I am currently working on an Angular Material Nested tree and I'm facing an issue while trying to implement a button for expanding/collapsing. The error message I encounter is: ERROR TypeError: Cannot read property 'reduce' of undefined ...

Leverage Async Await for Setting Response Data in TypeScript

Currently, I am making multiple API requests with different data and storing all the responses in an array. Then, I am using .map to map the response array to my original array to update the data. However, it seems like the process is not working correctly ...

Using React.ReactNode as an argument in Storybook

This is a unique button component type that I have created import React from 'react' export type ButtonProps = { label: string; color?:'primary' | 'secondary' | 'tertiary'; size?:'mobile' | 'tabl ...

Error message: "react-router typescript navigation version 0.13.3 - Unable to access 'router' property"

I'm currently in the process of porting an existing React project to TypeScript. Everything seems to be going smoothly, except for the Navigation mixin for react-router (version 0.13.3). I keep encountering an error message that says "Cannot read prop ...

Creating a universal wrapper function to serve as a logging tool?

Currently, I am working on a generic JS function that can wrap any other function. The purpose of this wrapper is to execute the wrapped function, log the input and output events, and then return the output for "transparent" logging. However, as I attempt ...

Issues with Angular 5 and Firebase integration

After updating my computer to High Sierra with a clean install, reinstalling the angular-cli, and cloning one of my previous projects that uses Firebase and angularfirebase2, I encountered an issue where any operation to get data from Firebase is not worki ...

Enhance filtering capabilities in FormGroup with an autocomplete input feature for more options

Seeking to implement a basic autocomplete textbox that allows selection from a filtered list of objects displayed by name. For instance, with an array of Country objects containing properties like countryName, countryCode, and countryId, the goal is to fi ...

Issue with unresolved module in ESLint

Currently, I am utilizing the vss-web-extension-sdk in my project. To ensure the validity of my files, I have integrated ESLint along with eslint-plugin-import and eslint-import-resolver-typescript. import { WidgetSettings, WidgetStatus } from "TFS/Dashbo ...

What is the best way to determine if a local storage key is not present?

By applying the if condition below, I can determine whether or not the local storage key exists: this.data = localStorage.getItem('education'); if(this.data) { console.log("Exists"); } To check for its non-existence using an if conditi ...

Tips for Decreasing Query Time with MatTable and MatTableDataSource

When working with my firestore database, I am trying to query documents and display them while also calculating the total value of a specific column (promiAmount). I have successfully displayed the values in a mat table, but I'm struggling to calcula ...

What could be causing the issue of *ngIf not displaying content within ng-container in Angular

I am struggling to close a bootstrap alert box by clicking on the close button using *ngIf. When I click on (close), I set isError to false. Even though I can see isError being logged as false, the ng-container is not disappearing. Here is my code: <d ...

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

I need to figure out how to export a variable from one component to layout.tsx in such a way that it is not exported as a function, which is currently causing the conditional check in the class name to always be true. Below is the code snippet: // File w ...

Modifying column array properties using jsstore

I am working with a jsstore table called tblInvoice const tblInvoice: ITable = { name: "invoice", columns: { // Here "Id" is name of column id: { autoIncrement: true, primaryKey: true, notNull: false }, branchId: { ...

Execute an Angular 7 Single Page Application directly through the file:// protocol

I've been diving into tutorials on SPA and client-side routing, but I'm still struggling to grasp it fully. How can I configure the router to function without a web server? For example: file:///C:/cxr/CXR-WebViews/dist/CXR-WebViews/index.html#/p ...

The constructor in Angular 2 service is operational, however, other functions within the service are experiencing issues

Here is the code I've been working on: This is the component.ts page code: import {Component, OnInit, NgModule, VERSION} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import { UserService } from " ...

Setting default parameters for TypeScript generics

Let's say I define a function like this: const myFunc = <T, > (data: T) => { return data?.map((d) => ({name: d.name}) } The TypeScript compiler throws an error saying: Property 'name' does not exist on type 'T', whic ...

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...