For a college project ive been trying to build a website with angular.
Said website will incorporate a lot of text, which is why i thought it might be a good idea to get that text from a txt file instead of writing everything into the html file.

After asking Chat Gpt and googling a bit I ended up with the code below, consisting of one parent and child ts file. However no matter what i do i cant get past an error saying: “TS2339: Property ‘getTexts’ does not exist on type ‘TextService'”, even though TextService is defined in text.service.ts.
After some more searching i found a few similar problems that all got solved by implementing httpclient differently than i did. After doing it through main.ts I got only more error messages though. What am I doing wrong or is my whole approach just bad?

    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]; // Zustand der Knöpfe
      buttonTexts: string[] = ['Button 1', 'Button 2', 'Button 3', 'Button 4', 'Button 5'];
      lastActivatedButtonIndex: number | null = null; // Index des zuletzt aktivierten Knopfes

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