Angular 4：如何使用 HTTPClient 读取文本文件的内容

Question

我的 Angular 4 项目目录中有一个 .txt 文件，我想阅读它的内容。怎么做 ？下面是我使用的代码。

该文件位于“app”文件夹内的“files”文件夹中。 我拥有 HTTPClient 代码的组件位于“app”文件夹内的“httpclient”文件夹中。

意思是“文件”文件夹和“httpclient”文件夹是子文件夹。

代码如下所示。它无法正常工作，因为我收到 404 错误 - 'GET http://localhost:4200/files/1.txt 404 (Not Found)'

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}`);
            }
        }
    );

Answer 1

试试这样：

this.http.get('app/files/1.txt').subscribe(data => {
    console.log(data.text());
})

CLI 无法访问您项目的 app 目录中的文档。如果你移动到文本文档，你可以访问像assets/1.txt这样的文本文件。

如果你想访问 app 目录中的文档，你需要在 .angular-cli.json

的 assets 数组中添加路径

.angular-cli.json

"assets": [
  "assets",
  "app", /* add this line to access document inside the app directory */
  "favicon.ico"
]

下面是我的示例尝试这样：

this.http.get('app/home/1.txt').subscribe(data => {
    console.log('data', data.text());
})

Answer 2

角度 6/7

{ responseType: 'text' as 'json'}

暂时有效

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

完整讨论请参阅 GitHub 上的this ticket。

Answer 3

只是对上一个答案的一个更正： 在选项中添加“responseType：'text'”：

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

Answer 4

这是在Angular 6中测试的

使用

创建服务

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'});
  }
}

并在您的组件中调用服务，如下所示

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

希望对你有帮助

Answer 5

我能够通过 Angular 6 项目获取本地文件 (JSON)。

项目结构：

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

步骤：

1) 在angular.json 中，我添加了放置文件的文件夹：

 "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) 编写以下服务来获取文件：

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()
         })
      )
   }
}

奖金：
如果您想读取自定义环境变量（除了标准 Angular 提供的），您可以将上述服务添加到 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 {
}

附：如有问题可以查看this one。