Http.get Response object - unable to access json ()?
I am following this tutorial video, Building Angular 2.x Based Web Apps with Visual Studio 2017 and around 51:00 am is the part I am on and I am getting into a problem in this source file:
With this function:
getAccountSummaries() {
return this.http.get('api/Bank/GetAccountSummaries')
.map(response => response.json() as AccountSummary[])
.toPromise();
}
I am getting red text in Visual Studio on .json()
that says
The "json" character cannot be resolved correctly, possibly because it is in an inaccessible module
and when I try to run the application, I get the error:
System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!
After the tutorial I have used the same pattern as that of the instructor, but I think that since something has changed, because it has one app.module.ts
, while my template came with four: app.module.client.ts
, app.module.server.ts
and app.module.shared.ts
, and, unfortunately, someone new to ASP.NET Core and Angular2, I have no idea why they are different or what the meaning is.
I've had success so far, just making any changes he made to it app.module.ts
to mine app.module.shared.ts
, which you can see here:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { AccountListComponent } from './components/account/account-list/account-list.component';
import { AccountSummaryComponent } from './components/account/account-summary/account-summary.component';
import { AccountDetailComponent } from './components/account/account-detail/account-detail.component';
import { FormatAccountNumberPipe } from './components/shared/format-account-number.pipe';
import { AccountActivityComponent } from './components/account/acccount-activity/account-activity.component';
import { AccountService } from './components/shared/account.service';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
HeaderComponent,
AccountListComponent,
AccountDetailComponent,
AccountSummaryComponent,
AccountActivityComponent,
FormatAccountNumberPipe
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'account', pathMatch: 'full' },
{ path: 'account', component: AccountListComponent },
{ path: 'detail/:id', component: AccountDetailComponent },
{ path: '**', redirectTo: 'account' }
])
],
providers: [ AccountService ]
};
Everything is compiled and works the same as before this line .json()
.
How to fix it?
source to share
The red text you are getting from Visual Studio is probably because VS cannot resolve the response object. The error should go away if you add the following to your file
import { Response } from '@angular/http';
and change adding Response type to your map functions like this:
getAccountSummaries() {
return this.http.get('/api/Bank/GetAccountSummaries')
.map((response: Response) => response.json() as AccountSummary[])
.toPromise();
}
Another issue with the missing provider is probably because the AccountService is being used in a component and that component is part of a module and that module does not have an AccountService defined as a provider. So make sure each module has
providers:[ AccountService ]
given in it.
hope it helps
source to share