After some investigation, I finally uncovered the reason :). It turns out that I mistakenly omitted importing and including HttpClient in my app.module.ts file within the imports array, causing it to be inaccessible to the application (I presume).
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Router Module for Application level Route
import { RouterModule,Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BookViewComponent } from './book-view/book-view.component';
//import statement for service
import { BookService } from './book.service';
import { BookHttpService } from './book-http.service';
import { HttpClientModule } from '@angular/common/http';
//decorators
@NgModule({
declarations: [
AppComponent,
HomeComponent,
BookViewComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: 'book/:isbn', component: BookViewComponent }
]),
HttpClientModule
],
providers: [BookService,BookHttpService],
bootstrap: [AppComponent]
})
export class AppModule { }
I unintentionally left out this module
import { HttpClientModule } from '@angular/common/http';
However, the second error remains unresolved. SyntaxError: unexpected token: '{' scripts.js:1:5 . I am puzzled as to why this error persists.
Here is a snippet from the angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
// Other configuration details follow...
}