Angular引入TXT文件文本遇TS2339错误的解决咨询

我正在为大学项目使用Angular搭建网站，由于网站包含大量文本，计划从TXT文件读取而非直接写入HTML。参考资料编写了TextService与AppComponent代码，但始终报错：TS2339: Property 'getTexts' does not exist on type 'TextService'。尝试调整HttpClient的引入方式到main.ts后，报错反而更多。请问我哪里操作有误，或是整体方案存在问题？

代码示例 #

text.service.ts

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

@Injectable({
   providedIn: 'root'
})
export class TextService {
  private url = 'assets/activeTexts.txt';

  constructor(private http: HttpClient) {}

  getTexts(): Observable<any> {
    return this.http.get<any>(this.url);
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavComponent } from './components/nav/nav.component';
import { TextService } from './text.service';
import { HttpClientModule } from '@angular/common/http';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, HttpClientModule, NavComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit  {
  title = 'Usage';
  stromVerbrauch: number = 8;
  buttonStates: boolean[] = [false, false, false, false, false]; // 按钮状态
  buttonTexts: string[] = ['Button 1', 'Button 2', 'Button 3', 'Button 4', 'Button 5'];
  lastActivatedButtonIndex: number | null = null; // 最后激活的按钮索引

  longText1: string = '';
  longText2: string = '';

  constructor(private textService: TextService) {}

  ngOnInit(): void {
    this.loadTexts();
  }

  loadTexts(): void {
    this.textService.getTexts().subscribe({
      next: data => {
        this.longText1 = data.text1;
        this.longText2 = data.text2;
      },
      error: err => {
        console.error('Error fetching texts:', err);
      }
    });
  }
}

1. 修复TS2339报错 #

这个错误是TypeScript无法识别TextService中的getTexts方法，按以下步骤排查：

• 确保text.service.ts已保存，重启IDE的TypeScript服务（比如VSCode按Ctrl+Shift+P选择"TypeScript: Restart TS Server"），清除缓存。
• 检查AppComponent中TextService的导入路径是否正确，确认text.service.ts和app.component.ts在同一目录下，路径'./text.service'无误。

2. 正确配置HttpClient（独立组件模式） #

你使用的是Angular独立组件（standalone: true），无需在组件imports中添加HttpClientModule，正确配置方式如下：

• 在main.ts中通过根注入器提供HttpClient：

  import { bootstrapApplication } from '@angular/platform-browser';
  import { AppComponent } from './app/app.component';
  import { provideHttpClient } from '@angular/common/http';
  
  bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()]
  });
  

• 移除AppComponent的imports数组中的HttpClientModule，避免重复配置冲突。

3. 调整文本文件格式 #

你的代码期望返回包含text1和text2的JSON结构，但TXT文件会被读取为纯字符串，导致data.text1取值失败：

• 将activeTexts.txt重命名为activeTexts.json，内容修改为JSON格式：

  {
    "text1": "第一段长文本内容",
    "text2": "第二段长文本内容"
  }
  

• 更新TextService中的url为'assets/activeTexts.json'，HttpClient会自动解析JSON数据，此时data.text1和data.text2可正常取值。

4. 额外验证项 #

• 检查angular.json的配置，确保assets目录被包含在构建资源中：
  在projects -> 你的项目名 -> architect -> build -> options -> assets中确认存在"src/assets"。
• 重启ng serve开发服务器，确保所有配置变更生效。

内容的提问来源于stack exchange，提问作者Harry Budder