TypeScript 未将解析的路径添加到自定义 Angular 库 .d.ts 文件中

Question

我有一个 Angular 库，我刚刚更新到 Angular v12，TypeScript 更新到 4.2.4，现在尝试使用此构建库时出现编译错误。

我发现问题出在其中一个生成的 .d.ts 文件中。

以前，更新前，工作时，有下面一行

readonly headerComponents: QueryList<import("../data-grid-column-header/data-grid-column-header.component").DataGridColumnHeaderComponent>;

但是，现在我构建的时候，它似乎使用了 tsconfi.json compileOptionPaths 中设置的路径之一。，即我有

     {
        "include": [
            "src",
            "node_modules/cypress"
        ],
        "exclude": [
            "node_modules/cypress"
        ],
        "compileOnSave": false,
        "compilerOptions": {
            "baseUrl": "./",
            "downlevelIteration": true,
            "outDir": "./dist/out-tsc",
            "sourceMap": true,
            "declaration": false,
            "module": "es2015",
            "moduleResolution": "node",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "importHelpers": true,
            "allowSyntheticDefaultImports": true,
            "target": "es5",
            "typeRoots": [
                "node_modules/@types"
            ],    
            "lib": [
                "es2018",
                "dom"
            ],
            "paths": {
                "@angular/*": [
                    "node_modules/@angular/*"
                ],
                "@mycompany/myapp-ui": [
                    "projects/myapp-ui/src/public-api.ts"
                ],
                "@mycompany/myapp-ui/*": [
                    "projects/myapp-ui/src/*"
                ]
            }
        }
    }

现在在我的 .d.ts 文件中

 get headerComponents(): QueryList<import("@mycompany/myapp-ui").DataGridColumnHeaderComponent>;

当你将鼠标悬停在 ths 上时，工具提示是 Cannot find module '@mycompany/myapp-ui' or its corresponding type declarations.ts(2307)

如果我将它替换为它曾经拥有的（即解析的路径），那么一切都很好。

为什么会输出这个，我该如何阻止它？

更新 1

一个组件被导入另一个组件，例如我有

在data-grid-header.component.ts，我有

import { DataGridColumnHeaderComponent } from '../data-grid-column-header/data-grid-column-header.component';

Answer 1

为什么会发生这种情况

如果您通过另一个文件对类型进行传递或隐式导入，通常会发生这种情况。

场景：

• A 出口DataGridColumnHeaderComponent
• B 从 A 导入 DataGridColumnHeaderComponent
  • B 导出一个返回 DataGridColumnHeaderComponent 的函数
• C 从 B 导入并调用函数
  • DataGridColumnHeaderComponent 类型只能通过 B 的导入间接知道
  • 所以 TypeScript 将类型输出为import("A").DataGridColumnHeaderComponent

示例：

// @mycompany/myapp-ui/data-grid-column-header.component.ts
// A - exports some type DataGridColumnHeaderComponent

export class DataGridColumnHeaderComponent {
    //...   
}

// @mycompany/example-library/index.ts
// B - imports `DataGridColumnHeaderComponent` and does something that publicly exposes that type

import { DataGridColumnHeaderComponent } from '@mycompany/myapp-ui';

export function doSomething(): DataGridColumnHeaderComponent {
    return DataGridColumnHeaderComponent;
}

// my-application/index.ts
// C - uses the library and accesses the `DataGridColumnHeaderComponent` type via B.
// We don't have an explicit import of this type in this file.

import { doSomething } from '@mycompany/example-library';

// `result` has the type `DataGridColumnHeaderComponent`, but the type is only known via B.
const result = doSomething();

在这个例子中，我们的应用程序 (C) 对 DataGridColumnHeaderComponent 具有传递依赖；我们只知道该类型通过 B。

所以 TypeScript 将类型输出为：import("@mycompany/myapp-ui").DataGridColumnHeaderComponent。

---

如何解决

解决方案是显式导入相同的依赖项，这样 TypeScript 就不会输出类型的相对路径。

// C (updated)
import { doSomething } from '@mycompany/example-library';

// !! Explicitly import the type here !!
import { DataGridColumnHeaderComponent } from '@mycompany/myapp-ui';
// or
import type { DataGridColumnHeaderComponent } from '@mycompany/myapp-ui';


const result: DataGridColumnHeaderComponent = doSomething();

---

替代修复

如果您不能/不希望这些项目之间存在依赖关系，那么另一种方法是重新导出中间项目/文件中的类型并从那里导入所有内容。

// B (updated)
import { DataGridColumnHeaderComponent } from '@mycompany/myapp-ui';

export function doSomething(): DataGridColumnHeaderComponent {
    return DataGridColumnHeaderComponent;
}

// !! Export the type here !!
export {
    DataGridColumnHeaderComponent
};

// C (updated)
import { doSomething, DataGridColumnHeaderComponent } from '@mycompany/example-library';

const result: DataGridColumnHeaderComponent = doSomething();