TypeScript is not adding resolved path into Custom Angular library .d.ts file

Issue

I have an Angular library I have just updated to Angular v12, and TypeScript to 4.2.4, and am having compile errors now when trying to use this build library.

I found the problem to be in one of the generated .d.ts files.

Previously, before the update, when it was working, it has the following line

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

However, now when I built is, it seem be using one of the paths setup in tsconfi.json compileOptionPaths., ie I have

     {
        "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/*"
                ]
            }
        }
    }

And now in the .d.ts file I have

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

And when you hover over ths, the tooltip is Cannot find module '@mycompany/myapp-ui' or its corresponding type declarations.ts(2307)

If I replace this with what it use to have (ie the resolved path), then all is good.

Why is it outputting this, and how I can stop it?

Update 1

One component is imported into another, eg I have

And in data-grid-header.component.ts, I have

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

Solution

Why this happens

This usually happens if you have a transitive or implicit import of a type through another file.

Scenario:

• A exports DataGridColumnHeaderComponent
• B imports DataGridColumnHeaderComponent from A
  • B exports a function that returns a DataGridColumnHeaderComponent
• C imports and calls the function from B
  • The DataGridColumnHeaderComponent type is only known indirectly via B's import
  • So TypeScript outputs the type as import("A").DataGridColumnHeaderComponent

Example:

// @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();

In this example our application (C) has a transitive dependency on DataGridColumnHeaderComponent; we only know about that type through B.

So TypeScript output the type as: import("@mycompany/myapp-ui").DataGridColumnHeaderComponent.

---

How to fix it

The solution is to explicitly import the same dependency so TypeScript doesn't output a relative path to the type.

// 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();

---

Alternative fix

If you can't have/don't want a dependency across those projects, then an alternative would be to re-export the type in the intermediate project/file and import everything from there.

// 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();

Answered By - Sly_cardinal