Angular/Typescript - 通配符模块声明答案

【问题标题】：Angular/Typescript - Wildcard module declarationAngular/Typescript - 通配符模块声明
【发布时间】：2019-02-21 17:27:44
【问题描述】：

我正在尝试实现通配符模块，但似乎无法正常工作：

现在我有以下有效的代码：

typings.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
  }
}

您可能会看到一个实时示例 here，但我想实现 WILDCARDS，如 here (typescriptlang) 和 here (sitepen) 所示：

实现应该允许我做这样的事情：

typings.d.ts

declare module "*.json!i18n" {
  const value: any;
  export default value;
}

declare module "*.json!static" {
  const value: any;
  export default value;
}

declare module "*!text" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json!i18n';
import * as someObject from './static/someObject.json!static';
import * as template1 from './templates/template1.html!text';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
    console.log(someObject.default);
    console.log(template1.default);
  }
}

问题是由于某种原因通配符没有被正确识别...在运行时抛出“json”未找到。

“未找到模块：错误：无法解析 'json' in ...”
“未找到模块：错误：无法解析...中的“静态””
“未找到模块：错误：无法解析...中的‘文本’”

here 第一次在 Angular 2 上实现时，就是这个功能的一个例子，

知道我做错了什么吗？？

【问题讨论】：

我正在删除我的答案，因为我发现它完全错误：通配符 declare module 确实适用于 TypeScript 中的相对导入。我认为您的问题出在 webpack 配置上，但我对此知之甚少，无法提供帮助。
谢谢你，马特，我是这么想的，因为我试图实现你的答案但没有成功:(我还在想办法实现这个。
你不应该在你的导入中使用!注解。它应该被提取到 webpack 配置中。您可能还想查看resolveJsonModule flag
你好@Ebuall，我已经在没有! 注释的情况下工作了，这个问题的原因是我想实现它，所以我可以分离每种不同类型的JSON文件，例如i18n JSON 的模块应该与此类似：declare module "*.json!i18n" { const value: any; export default value; export interface Language { [key: string]: any; }; } 我将能够通过仅使用导入来封装 JSON 行为/接口。
stackoverflow.com/questions/52320356/…

标签： angular typescript angular6 angular7 angular-module

【解决方案1】：

根据您分享的stackblitz code link，'static' 和 'template' 目录不存在。只需创建目录并将数据放入其中。还要更新您的导入并从路径中删除 !i18n 或 !static。

import * as es from './i18n/es.json';
import * as someObject from './static/someObject.json';

我仅使用静态/someObejcts 进行了测试。模板也将以同样的方式工作。

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';
import * as someObject from './static/someObject.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
    console.log(es.default.hello);
    console.log(someObject.default.hello);

  }
}

typings.d.ts

declare module "*.json!i18n" {
  const value: any;
  export default value;
}

declare module "*.json!static" {
  const value: any;
  export default value;
}

stackblitz 链接

Here 是您的代码的工作示例

【讨论】：

你好 Javapocalypse，这个问题是关于“如何使用通配符”，所以目标是让它们工作......通配符是您建议使用的“！static”和“！i18n”部分。 .. 删除它们会破坏使用它们的全部目的。
我添加了一个显示通配符文档的屏幕截图，因此您将看到我实际尝试实现的内容。