Angular 11 库使用路径别名

问题描述

我在 Angular11 中创建了一个项目，在文件夹 projects 下有一个库和一个应用程序：

-> Test
----> node_modules
----> projects
--------> test-lib
--------> test-app

当我自动创建 test-lib 时，它会在 tsconfig.json 文件中创建一个新的路径别名：

{
    "compileOnSave": false,"compilerOptions": {
        "baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"downlevelIteration": true,"experimentalDecorators": true,"moduleResolution": "node","importHelpers": true,"target": "es2015","module": "ES2020","lib": [
            "es2018","dom"
        ],"paths": {
            "test-lib": [
                "dist/test-lib/test-lib","dist/test-lib"
            ]
        }
    }
}

然后我在同一个组件文件夹中创建了一些组件和一个名为 _exports.ts 的文件。此文件仅包含导出列表。我在 public-api.ts 中导出了这个文件，现在我可以通过这种方式在 test-app 中使用组件：

import { MyComponent } from "test-lib";

为了在代码中排序，我在 paths 中添加了另一个别名：

"test-lib/components": ["dist/test-lib/components/_exports"]

在 test-app 中，我可以使用这个别名导入组件，但是当我编译应用程序时，我遇到了这个大错误：

Error: ./projects/test-app/src/app/app.component.ts
Module not found: Error: Can't resolve 'test-lib/components' in 'PATH_TO_FOLDER\Test\projects\test-app\src\app'
resolve 'test-lib/components' in 'PATH_TO_FOLDER\Test\projects\test-app\src\app'
Parsed request is a module
using description file: PATH_TO_FOLDER\Test\package.json (relative path: ./projects/test-app/src/app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: PATH_TO_FOLDER\Test\package.json (relative path: ./projects/test-app/src/app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: PATH_TO_FOLDER\Test\dist\test-lib\package.json (relative path: ./components/_exports)
        no extension
        Field 'browser' doesn't contain a valid alias configuration
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports doesn't exist
        .ts
        Field 'browser' doesn't contain a valid alias configuration
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.ts doesn't exist
        .tsx
        Field 'browser' doesn't contain a valid alias configuration
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.tsx doesn't exist
        .mjs
        Field 'browser' doesn't contain a valid alias configuration
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.mjs doesn't exist
        .js
        Field 'browser' doesn't contain a valid alias configuration
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.js doesn't exist
        as directory
        PATH_TO_FOLDER\Test\dist\test-lib\components\_exports doesn't exist
    resolve as module
    looking for modules in PATH_TO_FOLDER/Test
        using description file: PATH_TO_FOLDER\Test\package.json (relative path: .)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: PATH_TO_FOLDER\Test\package.json (relative path: ./test-lib/components)
            no extension
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\@test-lib\components doesn't exist
            .ts
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\@test-lib\components.ts doesn't exist
            .tsx
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\@test-lib\components.tsx doesn't exist
            .mjs
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\@test-lib\components.mjs doesn't exist
            .js
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\@test-lib\components.js doesn't exist
            as directory
            PATH_TO_FOLDER\Test\@test-lib\components doesn't exist
    PATH_TO_FOLDER\Test\projects\test-app\src\app\node_modules doesn't exist or is not a directory
    PATH_TO_FOLDER\Test\projects\test-app\src\node_modules doesn't exist or is not a directory
    PATH_TO_FOLDER\Test\projects\test-app\node_modules doesn't exist or is not a directory
    PATH_TO_FOLDER\Test\projects\node_modules doesn't exist or is not a directory
    PATH_TO_FOLDER\node_modules doesn't exist or is not a directory
    ...
    looking for modules in PATH_TO_FOLDER\Test\node_modules
        using description file: PATH_TO_FOLDER\Test\package.json (relative path: ./node_modules)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: PATH_TO_FOLDER\Test\package.json (relative path: ./node_modules/test-lib/components)
            no extension
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components doesn't exist
            .ts
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components.ts doesn't exist
            .tsx
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components.tsx doesn't exist
            .mjs
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components.mjs doesn't exist
            .js
            Field 'browser' doesn't contain a valid alias configuration
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components.js doesn't exist
            as directory
            PATH_TO_FOLDER\Test\node_modules\@test-lib\components doesn't exist
[PATH_TO_FOLDER\Test\dist\test-lib\components\_exports]
[PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.ts]
[PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.tsx]
[PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.mjs]
[PATH_TO_FOLDER\Test\dist\test-lib\components\_exports.js]
[PATH_TO_FOLDER\Test\@test-lib\components]
[PATH_TO_FOLDER\Test\@test-lib\components.ts]
[PATH_TO_FOLDER\Test\@test-lib\components.tsx]
[PATH_TO_FOLDER\Test\@test-lib\components.mjs]
[PATH_TO_FOLDER\Test\@test-lib\components.js]
[PATH_TO_FOLDER\Test\projects\test-app\src\app\node_modules]
[PATH_TO_FOLDER\Test\projects\test-app\src\node_modules]
[PATH_TO_FOLDER\Test\projects\test-app\node_modules]
[PATH_TO_FOLDER\Test\projects\node_modules]
[PATH_TO_FOLDER\node_modules]
...
[PATH_TO_FOLDER\Test\node_modules\@test-lib\components]
[PATH_TO_FOLDER\Test\node_modules\@test-lib\components.ts]
[PATH_TO_FOLDER\Test\node_modules\@test-lib\components.tsx]
[PATH_TO_FOLDER\Test\node_modules\@test-lib\components.mjs]
[PATH_TO_FOLDER\Test\node_modules\@test-lib\components.js]
@ ./projects/test-app/src/app/app.component.ts 2:0-46 39:26-32
@ ./projects/test-app/src/app/app.module.ts
@ ./projects/test-app/src/main.ts
@ multi ./projects/test-app/src/main.ts

当我从 test-lib 导入时，它工作正常，但我的别名却没有。如何创建适用于我的 test-app 的别名？

解决方法

您应该按以下方式包含路径：

tsconfig.json

{
   ...
        "paths": {
            "test-lib": [
                "dist/test-lib/test-lib","dist/test-lib"
            ]
            "test-lib/components/*": [
                "dist/test-lib/test-lib/components/*","dist/test-lib/components/*"
            ]
        }
    }
}

也使用 index.ts 而不是 exports.ts 作为您的桶出口。