Angular cli项目中的绝对路径

Question

我该如何在Angular CLI生成的项目中使用绝对路径?

假设我有这个路径：src -> app -> shared，我想要写成import {} from 'shared/ffdsdf/my.module.ts'而不是'../shared/ffdsdf/my.module.ts'

- user3409988

Answer 1

更好的示例:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@app/*": [
        "app/*"
      ],
      "@app/core/*": [
        "app/core/*"
      ],
      "@app/shared/*": [
        "app/shared/*"
      ],
      "@env/*": [
        "environments/*"
      ]
    }
  }
}

使用：

import { someService } from "@app/core/some.service";

改为：

import { someService } from "./../../core/some.service";

- Masoud Bimmar

---

是否可以设置绝对路径，例如 "C:/xxx/app/*" 而不是 "app/*"？ - ps0604

尝试在 main.ts 中应用这个方法对我来说不起作用，使用 import { AppModule } from '@app/app.module'; 它会抛出一个错误 "Multiple markers at this line - Cannot find module '@app/app.module'. - 1 changed line" - Daniel Methner

main.ts 不在 app 文件夹内。 - Masoud Bimmar

Answer 2

有一种 TypeScript 功能可以实现这个功能。

您可以修改 src/tsconfig.json 文件，以启用此功能，在 compilerOptions 下添加以下内容：

{
  "compilerOptions": {
    // ...
    "paths": {
      "*": [
        "./*",
        "app/*",
        "../node_modules/*"
      ]
    }
}

您可以根据需要更改模式键和值。您可以添加或删除文件夹，更改顺序等。

您还可以选择前缀而不仅是使用 *（特别是如果它会导致问题），您可以使用类似于 ~/* 的东西，然后您的导入将全部为 from '~/shared/sample' 等。

- Meligy

---

我有以下路径，你能帮我确定应该使用的正确结构吗？ "paths": { "appCore/": [ "app/core/" ], "appCommon/": [ "app/common/" ] }, - Charan Giri

如果定义这些路径映射的项目是一个库，会发生什么？当客户端应用程序访问已安装的库中的这些未知路径时，该如何避免应用程序崩溃？ - Stephane

Answer 3

我发现最简单的方法是将它放在 tsconfig.json 文件中。

"compilerOptions": {
    "rootDir": "src",
    "baseUrl": "src"
}

组件将会长这样：

import { Thing } from 'app/Thing';

对我来说，添加@并列出每个路径似乎是浪费时间。这样每个项目都将以相同的方式工作。

提示：如果出现模块未找到错误，请重新启动IDE，以便tsc重新启动。

- valentineProjects

---

哇，非常感谢您。我一直在寻找这样的东西，遍历每个文件夹并执行“@Shared”等操作非常烦人！现在他肯定是正确的方式，您只需要自动“导入”，就不必再担心相对路径的问题了。非常感谢！！ - Mickey Sly

Answer 4

在Angular9中，遵循以下步骤非常重要：

1. 在tsconfig.json中创建baseUrl和路径。

    {
 "baseUrl": "./src",
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@app/*": ["app/*"],
      "@views/*": ["app/views/*"],
      "@containers/*": ["app/containers/*"]
    }
}

注意：在这里你可以看到我还添加了@angular路径解析到tsconfig.json。这一步将确保VSCode显示正确的语法高亮。

2. 从tsconfig.app.json中删除baseUrl和path

注意：如果不执行此步骤，在编译Angular项目时会出现模块找不到的错误。（即使没有这个步骤，语法高亮也是正常的）。

- Ashan