Angular 6 - http.get not launched

Question

I training on PrimeNG and created a service to get data from a json file. https://www.primefaces.org/primeng/#/treetable

But impossible to get json data.

The method is called from a component using :

ngOnInit() {
  this.nodeService.getFileSystem().then(files => this.files = files);
}

I'm using this method in the service :

private filesystemUrl = 'http://localhost:4200/assets/data/filesystem.json';  

constructor(private http: HttpClient) { }

getFileSystem() {
  return this.http.get(this.filesystemUrl)
  .toPromise()
  .then(res => <TreeNode[]> res);
}

The console shows :

ERROR Error: Uncaught (in promise): Object: {"body":{"error":"Collection 'data' not found"},"url":" http://localhost:4200/assets/data/filesystem.json ","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found"} at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500) at ZoneTask.invoke (zone.js:485)

If I click in the console message on "url":" http://localhost:4200/assets/data/filesystem.json " I can access the json file so it should be another problem. This file is located in "assets/data/filesystem.json", and I modified angular.json :

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/data"
]

The main strange is that in network tab in the browser, I don't see any get call that try to access this json file :

localhost   304 document    vendor.js:100488    210 B   304 ms  
runtime.js  304 script  (index) 211 B   4 ms    
polyfills.js    304 script  (index) 212 B   6 ms    
styles.js   304 script  (index) 212 B   7 ms    
vendor.js   304 script  (index) 213 B   17 ms   
main.js 304 script  (index) 212 B   17 ms   
info?t=1539698839604    200 xhr zone.js:2969    367 B   2 ms    
websocket   101 websocket   sockjs.js:1683  0 B Pending 

I've tried other ways to write my method, like this one that seems ok in my IDE :

getFileSystem() {
  return this.http.get(this.filesystemUrl)
  .pipe(map((response: Response) => {
    console.log(response.json());
    return response.json();
  }))
  .subscribe();
}

but then, in component method calling the service, I didn't find a way to change "then()" because : [ts] Property 'then' does not exist on type 'Subscription'.

I'v also tried the service method like this, withoud errors shown in IDE for service or component, it sould be ok :

getFileSystem() {
  return this.http.get<TreeNode[]>(this.filesystemUrl);
}

But result in console :

ERROR {body: {…}, url: " http://localhost:4200/assets/data/filesystem.json ", headers: HttpHeaders, status: 404, statusText: "Not Found"} body: {error: "Collection 'data' not found"} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} status: 404 statusText: "Not Found" url: " http://localhost:4200/assets/data/filesystem.json " proto : Object

If anyone can help ? Thanks a lot !

Answer 1

Create your service like this:

    private filesystemUrl = 'http://localhost:4200/assets/data/filesystem.json';  

constructor(private http: HttpClient) { }

getFileSystem(): Observable<TreeNode[]> {
  return this.http.get<TreeNode[]>(this.filesystemUrl);

}

You are returning an Observable and you must subscribe to it in your component:

private treeNode: TreeNode[];
ngOnInit() {
  this.nodeService.getFileSystem().subscribe(data => {
     this.treeNode=data;
     console.log(data);
  });
}