http.get Response object - can't access json()?

Question

I'm following this instructional video, Building web apps powered by Angular 2.x using Visual Studio 2017, and around 51:00 is the part I'm at and I'm hitting a problem in this source file:

https://github.com/CRANK211/vs17-ng2-dnc/blob/master/3%20-%20with-data/components/shared/account.service.ts#L18

With this function:

getAccountSummaries() {
  return this.http.get('api/Bank/GetAccountSummaries')
    .map(response => response.json() as AccountSummary[])
    .toPromise();
}

I'm getting red text in Visual Studio on .json() which says

Symbol 'json' cannot be properly resolved, probably because it is located in inaccessible module

and when I try to run the application I get the exception message:

System.Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AccountService!

Following the tutorial I used the same template as the instructor did but I think something must have changed since then since he has a single app.module.ts while my template came with four: app.module.client.ts, app.module.server.ts, and app.module.shared.ts and unfortunately as someone new to ASP.NET Core and Angular2 I have no idea why they're different or what the significance might be.

I've had success up to now by just making any changes he makes to his app.module.ts to my 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 compiled fine and worked just like his until this .json() line unfortunately.

How do I fix it?

Answer 1

The red text you get from Visual Studio is probably because it VS cannot resolve the response object. The error should be gone when you prepend the following to your file

import { Response } from '@angular/http';

and change add the type Response to your map functions like so:

getAccountSummaries() {
 return this.http.get('/api/Bank/GetAccountSummaries')
    .map((response: Response) => response.json() as AccountSummary[])
    .toPromise();
}

The other issue you have with the missing provider, is probably because the AccountService is used in a component, and this component is part of a module, and this module does not have the AccountService defined as a Provider. So make sure that every module you have has

providers:[ AccountService ]

defined in it's configuration.

hope that helps