Winkel-4: Wie zu Lesen ist Inhalt der text-Datei mit HTTPClient

Habe ich eine .txt-Datei in meine Eckige 4-Projekt-Verzeichnis, und ich möchte, um die Inhalte Lesen. Wie es zu tun ? Unten ist der code, mit dem ich arbeitete.

Sich die Datei im 'files' - Ordner der sich im 'app' - Ordner.
Die Komponente, wo ich HTTPClient-code wird in 'httpclient' - Ordner, die in 'app' - Ordner.

Bedeutung 'Dateien' - Ordner und 'httpclient' - Ordner sind die Kinder.

Den code ist unten dargestellt. Es funktioniert nicht so, wie ich m immer 404-Fehler - ' http://localhost:4200/files/1.txt 404 (Nicht Gefunden)'

this.http.get('/files/1.txt').subscribe(data => {
        console.log(data);
    },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                //A client-side or network error occurred. Handle it accordingly.
                console.log('An error occurred:', err.error.message);
            } else {
                //The backend returned an unsuccessful response code.
                //The response body may contain clues as to what went wrong,
                console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
            }
        }
    );

Haben Sie versucht, eine relative URL? (d.h. http.get('files/1.txt') -- kein vorangestellter Schrägstrich) Oder das ablegen der Dateien in der assets Ordner, der Inhalte, von denen - glaube ich - ist kopiert in das Stammverzeichnis der Website.
ja, ich versuchte es gerade jetzt, gleiche Fehlermeldung. Es ist es nicht zu finden - 404. was ist falsch? Ich bin einfach die folgenden codes der offiziellen Winkel-docs Winkel.io/guide/http#anfordern-nicht-json-Daten
Ihre Datei-Pfad richtig ist ?
ja der Datei-Pfad richtig ist. Auch wenn ich den text-Datei im gleichen Ordner der Komponente, und führen Sie diese aus.http.get('./1.txt') bekomme ich den gleichen Fehler.
es funktioniert nicht, weil wenn die CLI baut das Projekt mit ng serve es nur Prozesse .ts .html und .css-Dateien. Statische assets wie .txt-Dateien gehören nicht in den code und Sie werden fallen durch ng serve.

InformationsquelleAutor yogihosting | 2017-11-01

angular

13

Versuchen wie diesem :
```
this.http.get('app/files/1.txt').subscribe(data => {
    console.log(data.text());
})
```
Die CLI kann nicht auf docments in der app-Verzeichnis Ihres Projekts. wenn Sie auf text-Dokument, können Sie den Zugriff auf die text-Datei wie assets/1.txt.

wenn Sie wollen, um access-Dokument in das Verzeichnis app müssen Sie den Pfad in das Anlagevermögen array in der .Winkel-cli.json

.Winkel-cli.json
```
"assets": [
  "assets",
  "app", /* add this line to access document inside the app directory */
  "favicon.ico"
]
```
hier unten ist mein Beispiel versuchen wie diesem :
```
this.http.get('app/home/1.txt').subscribe(data => {
    console.log('data', data.text());
})
```
Ja Vermögenswerte, die Dateien zugreifen, aber Wie kann ich beurteilen, Dateien immer in separaten Ordner?
Sie müssen hinzufügen app in das eckige-cli.json Datei in der assets-array . dann können Sie darauf zugreifen. und import führen Sie das Projekt erneut
Ich app Hinzugefügt, um die Winkel-cli.json, seine immer noch nicht funktioniert.
Nach hinzufügen app im inneren der Vermögens-array. Sie benötigen, um führen Sie das Projekt Erneut oder Starten Sie das Projekt neu
Sie sind einfach toll! Ich muss neu starten mein Winkel-Projekt. Ich war mit vs code. Also habe ich es geschlossen und wieder geöffnet und es lief die app einmal mehr. Jetzt bin ich in der Lage zu beurteilen. Der code hier ist.http.get('app/files/1.txt', {responseType: 'text'})

InformationsquelleAutor Chandru
9

Eckig 6/7

{ responseType: 'text' als 'json'}

funktioniert

diese.http.get("app/files/1.txt", { responseType: 'text' als 'json'}).subscribe(Daten => {
console.log(data.text());
})

Finden https://github.com/angular/angular/issues/18586 für eine vollständige Diskussion

InformationsquelleAutor nsk
3

Nur eine Korrektur zur vorherigen Antwort:
hinzufügen "responseType: 'text'" in den Optionen:
```
this.http.get("app/files/1.txt", "{ responseType: 'text' }").subscribe(data => {
    console.log(data.text());
})
```
InformationsquelleAutor Doron Saar

War ich in der Lage, eine lokale Datei(JSON) mit Winkel 6 Projekt.

Projekt strucuture:

|-src
|--app
|---core
|---...
|---app.module.ts
|--assets
|...

Schritte:

1) Innerhalb angular.json habe ich den Ordner wo ich die Datei:

 "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "src", //** my project root is "src" folder
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            //...
            "assets": [
              "src",         //<--- ADDED THIS
              "src/assets",
              "src/favicon.ico",
              "src/manifest.json",
              "src/robots.txt",
              "src/web.config"
            ]

2) Schrieb folgende service-Datei zu erhalten:

import { HttpClient } from '@angular/common/http'
import { Injectable } from '@angular/core'

@Injectable({
   providedIn: 'root'
})
export class EnvironmentService {
   constructor(private readonly _httpClient: HttpClient) {
   }

   public init(): Promise<any> {       
      return new Promise(resolve =>
         this._httpClient
         .get('file.json')
         .first()
         .subscribe((data: any) => {
            //data from JSON
            resolve()
         })
      )
   }
}

Bonus:

Im Falle dass, wenn Sie wollen, Lesen Sie benutzerdefinierte Umgebungsvariablen(außer dem, was standard-Winkel-one bietet) Sie können hinzufügen, über service in App.module.ts:

export function init_app(appLoadService: EnvironmentService): () => Promise<any> {
  return () => appLoadService.init()
}

@NgModule({
  //...
  providers: [
    EnvironmentService,
    { provide: APP_INITIALIZER, useFactory: init_app, deps: [ EnvironmentService ], multi: true },
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

P. S. Bei Fragen können Sie überprüfen,diese eine.

Arbeiten mit einem Winkel-6-app als gut, gefolgt Ihre Lösung, aber war nicht in der Lage, abrufen von JSON-erfolgreich. Habe ich: Eckige 6: HttpClient-Get JSON-Datei Fehler 404, Um die Klärung meiner situation.
Shared eine Antwort in deinem post: stackoverflow.com/a/50986804/806202 ich hoffe, es wird helfen.

InformationsquelleAutor Arsen Khachaturyan

Dies ist getestet Angular 6

Erstellen Sie einen Dienst, mit

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 
//Read  text file
export interface ResultJson{

}
@Injectable({
  providedIn: 'root'
})
export class TestService {
  urlEncoded = '/Test.text';
  getText(){
    return this.http.get(this.urlEncoded, {responseType: 'text'});
  }
}

aus und rufen Sie den service in Ihre Komponenten wie unten

  resultJSON: ResultJson;
  ResultJsonString : any;
this
    .testService
    .getText()
    .subscribe((data:ResultJson) => {
         this.ResultJsonString = data;
       });

Hoffentlich hilft

InformationsquelleAutor user2112373

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.