Angular 11库使用路径别名

Question

我在projects文件夹下的Angular11中创建了一个库和一个应用程序

-> 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"
            ]
        }
    }
}

然后，我在相同的components文件夹中创建了一些组件和一个名为_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中工作的别名

Answer 1

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

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作为桶导出。