2

My question sounds similar to Cannot find the '@angular/common/http' module and Error loading @angular/common/http - angular 2 but the problem is a bit different: I am using Angular 4.3.5 and I am trying to read data from a Web API. (This API puts out JSON data and is using SignalR and .net Core). I have followed several tutorials and came up with this code for the class that will actually contact the service:

import 'rxjs/add/operator/map';

import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Configuration } from './Configuration.js';

@Injectable()
export class DataService {
  private actionUrl: string;

  constructor(private http: HttpClient, private configuration: Configuration) {
    this.actionUrl = configuration.serviceUrl;
  }

  //public getAll<T>(): Observable<T> {
  //  return this.http.get<T>(this.actionUrl);
  //}

  public getSingle<T>(id: number): Observable<T> {
    return this.http.get<T>(this.actionUrl + id);
  }
}

@Injectable()
export class CustomInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!req.headers.has('Content-Type')) {
      req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
    }

    req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
    console.log(JSON.stringify(req.headers));
    return next.handle(req);
  }
}

Now, building this project (I am using Visual Studio 2017 Enterprise) and running a gulp task to transpile the .ts to .js works just fine, so do all the intellisense-tooltips - the IDE does recognize the existance of those things. But if I open it up in a browser (doesnt matter if firefox, edge or chrome) I get the following error: zone.js:958 GET http://localhost:3966/libs/@angular/common/bundles/common.umd.js/http 404 (Not Found)

If I edit the transpiled javascript file by hand and write common-http.umd.js there, the file is found. (This is the reason why at the top I import Configuration.js instead of Configuration - it doesnt seem to want to automatically resolve the suffix, like in some tutorials). I hope I am not too vague, since this is my first Time asking something publically. Also I was not able to find an answer in the given questions.

MPoutanen
  • 131
  • 2
  • 7

1 Answers1

0

Well, I found a solution, for anybody who is curious why this and similar problems exist: I had to edit my systemjs file and add this line:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

and it works!

MPoutanen
  • 131
  • 2
  • 7