Storing information retrieved from the API for use in different modules

Trying to extract data from a WEB API service using Angular 8 has been quite challenging for me.

A service I created makes the API call:

return this.http.get<UserSession>(uri)
  .pipe(map((json: UserSession) => this.EntryFormAdapter(json)));

This service then utilizes a data adapter to convert the JSON, although I'm unsure if it's necessary due to strong typing. Interestingly, adding properties to the UserSession constructor causes it to malfunction.

UserSession (fully functional):

export class UserSession {
  public SessionId: string;
  public SessionTimeout: number;
  public User: User;
}

UserSession (not functioning correctly):

export class UserSession {
  constructor (public SessionId: string,
      public SessionTimeout: number,
      public User: User) { }
}

I need to keep the UserSession in global data so that the SessionId is accessible for my HMAC HttpInterceptor.

Interceptor (partially implemented):

constructor(private userSession: Observable<UserSession>) {
    this.userSession.subscribe(us => this.sessionId = us.SessionId);
}

I've dedicated countless hours trying to resolve these two key issues: 1) Making a parameterized constructor function properly 2) Storing a global UserSession object for use in other modules.

Answer №1

To successfully configure the app in app.module.ts, I needed to include UserSession in the provider array:

    @NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    AddIssueComponent
  ],
    imports: [
    ReactiveFormsModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'add-issue', component: AddIssueComponent },
    ])
    ],
    providers: [ApiService, UserSession, AppSettings, AppSettingsService,
        //{ provide: APP_INITIALIZER, useFactory: getSettings, deps: [AppSettingsService, ApiService, AppSettings], multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: HmacInterceptorComponent, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

Exploring the Power of Observables in Angular 2: Chaining and

Hi there! I'm relatively new to Angular and still getting the hang of observables. While I'm pretty comfortable with promises, I'd like to dive deeper into using observables. Let me give you a quick rundown of what I've been working on ...

Tips for utilizing single quotation marks while logging multiple variables in console

When I write console.log("entered values are "+A+" and "+B); the tsLint gives a warning that single quotes should be used. However, I discovered that if I use single quotes, I am unable to include multiple variables in the same console ...

Is there a possibility in TypeScript to indicate "as well as any additional ones"?

When working with typescript, it's important to define the variable type. Consider this example: userData: {id: number, name: string}; But what if you want to allow other keys with any types that won't be validated? Is there a way to achieve thi ...

Managing server errors when utilizing Observables

i am currently developing an Angular 2 application and part of it includes a login feature that utilizes this service. import { Http, Response } from '@angular/http'; import {Injectable} from '@angular/core'; import 'rxjs/add/op ...

Tips for changing a value in an ngIf template

Hi there, I'm fairly new to Angular and I am trying to make some changes in the ngIf template. I have created a component called research-list and I want to display the research data defined in research-list.ts file. However, when I try to use modify( ...

What is the best way to output data to the console from an observable subscription?

I was working with a simple function that is part of a service and returns an observable containing an object: private someData; getDataStream(): Observable<any> { return Observable.of(this.someData); } I decided to subscribe to this funct ...

Error: The class you are attempting to access is

Currently, I am utilizing Vite.js along with TypeScript. My TypeScript file is located in 'src/vmodel/VGraph'. Within the index.html file, I import the aforementioned file as follows: <script type="module" src="/src/vmodel/VGrap ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

What is the process for incorporating JavaScript files into an Angular project?

I have a template that works perfectly fine on Visual Studio. However, when I try to use it on my Angular project, I encounter an issue with the JavaScript code. I have filled the app.component.html file with the corresponding HTML code and imported the ...

Executing a series of asynchronous HTTP calls in Angular until a specific condition is satisfied

In Angular, I am making an HTTP call that returns a promise. Currently, I am refreshing the call using setTimeout at regular intervals. Are there any built-in functions or design patterns available to handle this task more efficiently? ...

AgGrid Encounters Difficulty in Recovering Original Grid Information

After making an initial API call, I populate the grid with data. One of the fields that is editable is the Price cell. If I edit a Price cell and then click the Restore button, the original dataset is restored. However, if I edit a Price cell again, the ...

Commitments shatter amidst constructing a website

Utilizing promise and http.get to retrieve data from a JSON API in Wordpress. Once the data is retrieved, it should be displayed on a page... However, an error occurs when attempting to build the page due to the data not being available. What steps can ...

Ionic 2 Media Plugin File Status with Ionic Native

In the Ionic Native Media plugin documentation found here, it mentions that there are both static and instance members, such as status. I am looking for an example related to the file status in the media plugin. I attempted to do this: console.log(this. ...

The requirement of the second parameter being optional or required will depend on the value of the first

Is there a way to make the second parameter of my function optional or required based on the value of the first parameter? Here's an example code snippet: enum Endpoint { USERS = '/users/:userId', ORDERS = '/orders' } typ ...

Having trouble triggering a change event within a React component?

I'm working on a straightforward react-component that consists of a form. Within this form, the user can search for other users. To ensure the form is valid, there needs to be between 3 and 6 users added. To achieve this, I've included a hidden ...

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Below, I have provided my code which utilizes the lazyLoading Module. Please review my code and identify any errors. Currently facing TypeError: Cannot read property 'toLowerCase' of undefined in Angular 7. Model Class: export class C_data { ...

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

Guide on importing a custom CSS file from Syncfusion Theme Studio into an Angular project

Is there a way to incorporate custom scss files downloaded from Syncfusion Theme Studio into Angular CLI without adding the URL to the styles section in angular.json? Can we directly import it into styles.scss instead? I attempted to do so by including th ...

Angular Components: Achieving Full Height Issue with TabsResolved

I'm facing a challenge in making my tab fill the full height of the content underneath it. I've tried different solutions like setting height: 100%, but nothing seems to be working. Here is the HTML code: <mat-tab-group [selectedIndex]=" ...

typescript warns that an object may be potentially null

interface IRoleAddProps { roles: Array<IRole> } interface IRoleAddState { current: IRole | null } class RoleAdd extends React.Component<IRoleAddProps, IRoleAddState> { state = { current: null, } renderNoneSelect = () ...