在 Angular 库中导入路径答案

【问题标题】：Import paths in Angular library在 Angular 库中导入路径
【发布时间】：2021-04-21 19:10:26
【问题描述】：

为了缩短我添加的库中的导入路径

"paths": {
  "@services": ["lib/services"]
}

致我的tsconfig.lib.json。我的目录结构大多是默认的，有多个项目使用一个库：

projects
  library/
    src/
      lib/
        services/
          index.ts
    tsconfig.lib.json
  [projects...]

我想使用类似的导入

import {service} from "@services";

就在我的库中 - 但到目前为止，我收到“找不到模块 @services”错误。

我猜路径不正确 - 但我不知道如何解决这个问题。有人有想法吗？

edit: Used baseUrl: "src" - 这适用于构建，但在使用 ng serve 启动其中一个项目时不起作用（由于相同的错误，“找不到模块”）。（未使用 aot 标志）

谢谢。

【问题讨论】：

你是否按照文档base url must be specified if "paths" is.添加了baseurl bcs

标签： angular typescript

【解决方案1】：

参考这个 tsconfig.json。确保此配置文件位于 src 文件夹的同一级别

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "paths": {
      "@app/*": [ "src/app/*" ],
      "@core/*": [ "src/app/core/*" ],
      "@environments/*": [ "src/environments/*" ],
      "@shared/*": [ "src/app/shared/*" ]
    },
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

【讨论】：

【解决方案2】：

过去几天我一直在努力解决同样的问题，并找到了解决方案，至少对于 Angular 10。

在tsconfig.lib.json 上，您必须定义baseUrl，就像提到的jitender 一样。路径需要相对于tsconfig.lib.json 所在的位置。

这里有两个对我有用的选项：

"baseUrl": "./",
"paths": {
  "@services/*": ["src/lib/services/*"]
}

和

"baseUrl": "src/lib",
"paths": {
  "@services/*": ["services/*"]
}

【讨论】：

【解决方案3】：

您是否按照文档 base url must be specified if "paths" is. 添加了 baseurl bcs？

您将需要更新 tsconfig.json 中的路径以及类似

"baseUrl":"./",
 "paths:"{
 "@services/*":["projects/ng-otp-input/src/lib/services"],
...
}

您还需要在 tsconfig.lib.json For more info Refer to this SO post 中添加相同的配置

【讨论】：

已使用 baseUrl: "src" - 这适用于构建，但不适用于使用 ng serve 启动其中一个项目时（由于相同的错误，“找不到模块”）。（未使用 aot 标志）
@nehalist 我找到了与您的查询相关的内容stackoverflow.com/a/54982488/5621827 希望这能解决您的问题

【解决方案4】：

将"importHelpers": true, 也添加到您的 ts 配置中。

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习

【解决方案5】：

在 Angulare 10 中。我们应该添加tsconfig.base.json。

"paths": {
  "@services/*": ["src/lib/services/*"]
}

注意：当您进行更改时，每次都应该重新构建您的项目，否则如果使用@service 会出错。因为如果面对多次。

【讨论】：