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:
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?