如何在Angular中导入并读取assets目录下自定义.myext后缀格式文件

步骤1：修正data.myext文件语法 #

你当前提供的文件存在多处非法语法，需要先修正为可识别的格式，修正后内容参考如下：

// assets/data.myext
export const mydata = [
  {
    "name": "SOMENAME",
    "value": 1345
  }
]

注意：原内容中的中文引号、value字段后的重复冒号、数字前导零问题都已修正，同时添加了export关键字方便TS直接导入。如果你完全不想修改原文件内容，可以直接看后面的可选方案。

步骤2：配置TypeScript识别自定义后缀 #

首先修改项目根目录下的tsconfig.app.json，添加自定义后缀识别配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "extensions": [".ts", ".js", ".myext"]
  }
}

然后在src目录下新建类型声明文件custom-type.d.ts，给.myext文件提供类型支持，确保TS编译不报错：

// src/custom-type.d.ts
declare module '*.myext' {
  export const mydata: Array<{
    name: string;
    value: number;
  }>;
}

步骤3：在app.component.ts中导入使用 #

// app.component.ts
import { Component } from '@angular/core';
// 导入自定义文件的数据
import { mydata } from '../assets/data.myext';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 因为原数据是数组结构，取第一个元素后就能直接通过.name访问字段
  mydata = mydata[0];
}

步骤4：在模板中读取数据 #

<!-- app.component.html -->
<div>名称：{{ mydata.name }}</div>
<div>数值：{{ mydata.value }}</div>

如果你完全不想改动data.myext的原始内容，可以用Angular的HttpClient动态读取解析：

1. 先在app.module.ts中导入HttpClientModule
2. 修改app.component.ts代码：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mydata?: {name: string, value: number};

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('assets/data.myext', {responseType: 'text'}).subscribe(rawContent => {
      // 直接解析原始文件内容
      const parseFunc = new Function(`${rawContent}; return mydata[0];`);
      this.mydata = parseFunc();
    })
  }
}

这种方案不需要修改原文件，也不需要额外配置TS的后缀识别规则，更适合资源文件不可修改的场景。

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