Bonjour, est-ce que quelqu'un saurait comment lire un fichier situé dans src/assets/text/fichier.txt ?

Ca a l'air bête comme ça, mais je galère. Autant en Java ou python je sais comment faire, autant en Js avec Angular, quand je cherche sur internet, je vois des solutions pour savoir comment lire un fichier qu'un client dépose sur le site (ce que je ne VEUX PAS faire, puisque le fichier se trouve dans le projet Angular).

Mon but est d'itérer ligne par ligne dans le fichier texte pour stocker l'info quelque part (dans un tableau ou un composant par exemple), afin de l'afficher sur une page html.

Tu as essayé avec fetch() ?

https://developer.mozilla.org/fr/docs/Web/API/Fetch_API

j'ai essayé avec

fetch('src/assets/text/system.txt').then(function(response) {
      if(response.ok) {
        response.blob().then(function(myBlob) {
          var objectURL = URL.createObjectURL(myBlob);
          // myImage.src = objectURL;
          console.log('c\'est bon!');
        });
      } else {
        console.log('Mauvaise réponse du réseau');
      }
    })
      .catch(function(error) {
        console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
      });

mais ça me génère une erreur puisque j'ai l'impression que ça va chercher la ressource côté client, et pas côté serveur (alors que je détiens le fichier texte dans les sources du projet...). Du coup, je vois pas trop comment faire

Angular => situé sur le front
Ton fichier (src/...) => situé sur le back
Donc pour lire le fichier en question, une requête HTTP sera nécessaire sauf si tu le compiles directement dans le JS avec NodeJS (ce que je te conseille donc de faire).

Pour l'ajouter ainsi c'est assez simple, suffit d'utiliser le FileSystem de NodeJS.

const fs = require('fs');

fs.readFile('src/assets/text/fichier.txt', 'utf8', function(err, data) {
   const content = data;
   console.log(content);
});

Pour le reste je te laisse voir la doc de fs.

Salut, merci pour ta réponse.

src/app/file/file.component.ts:3:21 - error TS2307: Cannot find module 'fs' or its corresponding type declarations.

3 import * as fs from 'fs';

Il existe pas une autre solution sinon ? System import c'est pas mieux ?

j'ai essayé aussi avec

const fs = require('fs');
    
    const data = fs.readFileSync('src/assets/text/fichier.txt',
      {encoding:'utf8', flag:'r'});

    console.log(data);

dans la console j'ai l'erreur suivante

ERROR TypeError: fs.readFileSync is not a function

marrant comme j'ai jamais autant galéré à ouvrir un simple fichier avec un langage ou un framework, c'est peut-être que Angular est pas fait pour

ou alors peut-être que je devrais connecter Angular à firebase ou un truc du genre pour aller chercher mes infos là bas ? je sais plus quoi faire, j'ai plus d'idées

Quel est l'intérêt d'avoir un fichier dans le dossier assets ? S'agit-il d'une conf ou alors de données pour remplir un tableau ou autre ?
S'il s'agit de données, ne serait-il pas judicieux d'utiliser firestore pour avoir une base de données (vu que tu parles de firebase) ?

Je n'ai jamais utilisé fs, mais pour debug, tu peux soit ouvrir le debugger de ton navigateur et mettre un point d'arrêt, soit faire un console.log(fs) pour voir si l'objet n'est pas nul.
Mais ça semble bien être ce que tu as fait : https://nodejs.dev/learn/reading-files-with-nodejs

Sinon une autre possibilité est d'utiliser httpClient apparemment

constructor(http: HttpClient) {
    this.httpClient = http;
  }

et ensuite dans le code

this.httpClient.get('assets/text/fichier.txt', { responseType: 'text' })
      .subscribe(data => console.log(data));

merci, je vais essayer tes solutions

Quel est l'intérêt d'avoir un fichier dans le dossier assets ? S'agit-il d'une conf ou alors de données pour remplir un tableau ou autre ?

S'il s'agit de données, ne serait-il pas judicieux d'utiliser firestore pour avoir une base de données (vu que tu parles de firebase) ?

oui, c'est exactement ça: ce sont des données pour remplir un tableau, c'est tout. Je me dis que utiliser la base de données pour ça c'est un peu overkill...

c'est bon, ça fonctionne, merci la requête affiche 200 !

En fait j'ai dû aller dans le fichier angular.json et ajouter

"assets": [
              "src/favicon.ico",
              "src/assets",
              "assets"
            ],

(ou tout chemin m'étant nécessaire pour aller chercher mon fichier au bon endroit!).

Ca marche avec la solution de wouh_pinaise, mais au final j'ai opté pour celle-ci (pour pouvoir traiter le texte après):

readFile(){
    fetch('assets/text/system.txt')
      .then(response => response.text())
      .then(data => {
        console.log(data);

        // Do something with your data
      });
  }

merci beaucoup pour votre aide