Angular如何从非JSON文件读取内容初始化字符串变量？

可以通过类似方式加载.txt或.csv文件，但需要先给TypeScript添加对应的类型声明——因为TypeScript默认只支持导入.json格式的文件。

步骤1：添加类型声明文件 #

在项目根目录或者src目录下创建一个typings.d.ts文件，写入以下内容：

// 声明.txt文件的导入类型
declare module '*.txt' {
  const content: string;
  export default content;
}

// 声明.csv文件的导入类型
declare module '*.csv' {
  const content: string;
  export default content;
}

这个文件会告诉TypeScript：当导入.txt或.csv后缀的文件时，导出的内容是字符串类型。

步骤2：导入并使用文件内容 #

配置完成后，就可以直接导入文件并用内容初始化字符串变量：

• 导入txt文件：

import txtContent from './my-file.txt';
let textData: string = txtContent;

• 导入csv文件：

import csvContent from './my-file.csv';
let csvData: string = csvContent;

补充说明 #

如果是Angular CLI创建的项目，默认构建配置已经会处理这类文件的加载，无需额外安装loader。如果是自定义webpack配置的场景，需要确保配置了raw-loader来将txt/csv文件转成字符串导出。

内容的提问来源于stack exchange，提问作者SD.