TypeScript + Angular 动态导入模块构建失败

Question

我正在做一个 public 个人项目：https://github.com/chdelucia/hack

我想动态导入一些模块。当我用纯字符串编码时，它按预期工作：

const a = await import(`../data/ctfbanditi`);

但是当我尝试使用这样的变量时：

let b = 'ctfbanditi';
const a = await import(`../data/${b}`);

我收到以下错误：

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\MYlocalpath\data\ctfbanditi.ts is missing from the TypeScript compilation.
Please make sure it is in your tsconfig via the 'files' or 'include' property. at ivy\loader.js

我读过一些类似的问题是由小写大写等拼写错误引起的，但我认为不是我的情况。

这个想法是有一些函数，其中有一个名称属性，并像这样读取特定的模块：

  async getBlogHtmlbyId(name: string): Promise<string> {
    let code= '';
    const a = await import(`../data/${name}`);
    return code;
  }

有什么建议吗？提前致谢。

Answer 1

这个问题的解决方案是在 tsconfig.app.json

上添加 ts 模块

在我的例子中，我想要动态导入的所有模块都存储在文件夹/data/ 中。所以我在这样的包含部分添加了 "src/data/*.ts"：

    /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
  ],
  "include": [
    "src/**/*.d.ts",
    "src/data/*.ts"
  ]
}

在服务端：

  async getBlogHtmlbyId(fileName: string): Promise<string> {
    const code = await import(`../data/${fileName}`);
    return code?.blog || '';
  }

TypeScript + Angular 动态导入模块构建失败

TypeScript + Angular dynamic Imports module build failed

angular

typescript

importerror