json - 在 Angular 中，作为索引类型导入的 json 文件总是返回 undefined

Question

您会在底部找到在您自己的设备上复制的说明。

---

我有一个使用 Angular CLI 创建的基本 Angular 项目，在 TypeScript 3.1.3 上运行，除了一个类和一个 json 文件之外没有添加任何东西。

我使用 Angular CLI 使用以下命令创建了一个 ResourcesService 类:

ng generate service Resources

我基本上是用它来加载 json 文件，作为本地化的一种方式(而不是使用 Angular 未完成的内置国际化功能)。

下面是我的类，以及json文件:

ResourcesBundle.json

{
    "label.changeLanguage": "Change language",
    "label.education": "Education",
    "label.experience": "Experiences",
    "label.skills": "Skills",
    "label.summary": "Summary",
    "label.language.english": "English",
    "label.language.french": "French"
}

资源.服务.ts

import * as resources from '../assets/resources/ResourcesBundle.json';

@Injectable({
    providedIn: 'root'
})

export class ResourcesService {

    constructor() {}

    public getString(label: string): string {
        let resource: string = resources[label];
        return resource;
    }
}

当然，为了能够以这种方式导入 json 文件，我在 tsconfig.json 中设置了 "resolveJsonModule": true。

服务本身运行正常。我可以注入(inject)它并调用 getString 方法，它运行时没有任何错误。

但是，无论我向 getString 方法传递什么值，返回值始终是 undefined。我什至尝试对 label = 'label.summary' 的值进行硬编码，但它仍然返回 undefined。唯一一次它正常工作是当我直接在括号之间写入字符串时:

let resource: string;
label = 'label.summary';
resource = resources[label]; // resource == undefined
resource = resources['label.summary']; // resource == 'Summary'

在VSCode的TS中，resources的内容如下:

    label.changeLanguage
    label.education
    label.experience
    label.language.english
    label.language.french
    label.skills
    label.summary

当使用 console.log(resources) 时，控制台在 Firefox 上显示如下内容:

    Object {
            label.changeLanguage: "Change language"
            label.education: "Education"
            label.experience: "Experience"
            label.language.english: "English"
            label.language.french: "French"
            label.skills: "Skills"
            label.summary: "Summary"
    }

因此 json 已正确加载，但它只能与硬编码字符串一起使用。

我找到的唯一其他解决方案是放弃 json 文件并直接在代码中初始化索引类型:

private resources: { [key: string]: string } = {
    'label.changeLanguage': 'Change language',
    'label.education': 'Education',
    'label.experience': 'Experiences',
    'label.skills': 'Skills',
    'label.summary': 'Summary',
    'label.language.english': 'English',
    'label.language.french': 'French'
};

但是，我认为这根本不是一个好方法......

对于导入的json文件，为什么我使用变量时总是返回undefined？或者，为什么它只适用于括号之间的硬编码字符串？

---

编辑:

您会在下方找到演示项目的 stackblitz 链接:

https://stackblitz.com/edit/angular-h2aspf?file=tsconfig.json

如果您在浏览器上运行它，它将正常工作(控制台将正确显示Change language)。

但是，如果您下载它并在本地运行它，您会注意到控制台将显示 undefined。

本地运行:

• 你必须有 npm 和 Angular CLI
• 下载 stackblitz 演示并将其解压缩到一个文件夹中
• 在项目文件夹中运行npm i
• 运行 ng serve --open
• 在浏览器上打开控制台，它应该显示undefined，而不是预期值(Change language on stackblitz)

Answer 1

编辑:

根据对 Angular CLI 问题的评论，解决方法是在 tsconfig.json 中设置 "esModuleInterop": true，并将导入语句更改为:

import * as resources from '../assets/resources/ResourcesBundle.json';

为此:

import resources from '../assets/resources/ResourcesBundle.json';

---

原答案:

在不同设备上多次检查后，我认为这是一个与 Angular(当前版本:7.0.2)直接相关的错误。

再拿我在题目中举的例子:

https://stackblitz.com/edit/angular-h2aspf?file=tsconfig.json

在浏览器上，这个演示在控制台上输出Change language。

在语言环境设备上:

• 下载 stackblitz 演示并将其解压缩到一个文件夹中
• 在项目文件夹中运行npm i
• 如果您使用 ng serve 运行，您会在 Web 浏览器控制台中注意到 undefined
• 停止 Angular，然后使用 ng serve --prod 再次运行。 Web 浏览器控制台现在可以正确输出 Change language

针对这个问题，我已经在 GitHub 上为 Angular 和 Angular CLI 项目打开了以下问题:

• Angular :Issue #26785: Imported json file as indexed type always giving undefined when Angular is not running in production mode

• Angular CLI:Issue #12781: Imported json file as indexed type always giving undefined, but not when running ng serve --prod