Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (non trouvé) ng2-fichier-upload

Question

J'utilise Angular2-CLI 1.0.0-beta.28.3 J'utilise ng2-file-upload pour télécharger mon TXT fichier. Cependant, j'ai toujours eu "Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (introuvable)" ce message d'erreur. En ce moment, je suis sûr que je n'ai pas de fichier system-config.ts. Donc, je ne peux pas utiliser la plupart des solutions que j'ai trouvées sur l'autre site. Est-ce que quelqu'un sait ce qui ne va pas avec mon code? Voici mon component.ts:

import { Component, OnInit } from '@angular/core'; 
import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; 

const URL = 'http://XXx.xxx.xxx.xxx/amazonStatements/'; 

@Component({ 
    selector: 'app-arr', 
    templateUrl: './arr.component.html', 
    styleUrls: ['./arr.component.css'] 
}) 
export class ARRComponent { 
    private data: TbArr; 
    private uploader:FileUploader = new FileUploader({url: URL}); 

    constructor() { 
    } 
    ngOnInit() { 
    } 

} 

Voici mon fichier html:

<div> 
    <span style="float:left;padding:3px 12px;">Upload File:</span><span class="btn btn-default btn-file"> 
Choose File <input type="file" ng2FileSelect [uploader]="uploader" accept="text/plain" multiple /></span> 
    <button type="button" class="btn btn-primary btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> 
       <span class="glyphicon glyphicon-upload"></span> Upload Now 
      </button> 
</div> 

Voici le message d'erreur je suis arrivé:

MISE À JOUR MA QUESTION: Ceci est mon Structure du dossier du projet:

Answer 1

J'ai récemment mis en œuvre le file-uploader dans mon projet, voici comment je l'ai mis en place:

Créer une variable FileUploaderOptions, définissez les propriétés pertinentes à l'intérieur qui, passent ensuite dans le file-uploader

import { Component, OnInit } from '@angular/core'; 
import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; 

const URL = 'http://XXx.xxx.xxx.xxx/amazonStatements/'; 

@Component({ 
    selector: 'app-arr', 
    templateUrl: './arr.component.html', 
    styleUrls: ['./arr.component.css'] 
}) 
export class ARRComponent { 
    private data: TbArr; 
    private uploader:FileUploader; 

    constructor() { 
    } 
    ngOnInit() { 

     const uploaderOptions: FileUploaderOptions = { 
      url: URL, 
      autoUpload: false, 
      isHTML5: true, 
      removeAfterUpload: true, 
     }; 

     this.uploader = new FileUploader(uploaderOptions); 


    } 

}