如何配置 Angular 项目 tsconfig 路径 [] 而不会出现 linting 错误？

Posted 2023-03-07

【中文标题】如何配置 Angular 项目 tsconfig 路径 [] 而不会出现 linting 错误？

【英文标题】：how to configure an angular project tsconfig paths[] without linting errors?

【发布时间】：2019-03-05 10:15:45

【问题描述】：

我们的 tsconfig.ts

中有以下配置

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "src",
    "paths": 
      "@app/*": ["app/*"],
      "@pages/*": ["app/pages/*"]
      ...
    ,

然后我们可以在其他 ts 文件中使用更简洁的导入，如下所示：

import UrlConstants from '@app/common/constants/url-constants';

linting 项目时出现问题：

Module '@app/common' is not listed as dependency in package.json

有什么方法可以解决这个问题而不用回到使用 ./***/***/ 进行导入？

【问题讨论】：

您显然正在使用自定义 lint 规则，并且该 lint 规则已损坏。禁用规则并提交问题

@AluanHaddad 自定义 lint 规则？ palantir.github.io/tslint/rules/no-implicit-dependencies这是我认为的规则。

啊，这是官方规则的一部分。感谢您的参考。您可以按照说明禁用规则或白名单模块。我仍然说这是规则中的错误。在许多情况下，路径不仅仅是一种便利。

好吧，我认为我没有回答任何问题，因为您自己刚刚链接的文档显示了如何使用白名单配置规则。我要补充的是我对路径映射很重要的脾气暴躁的看法。

@AluanHaddad 我正在尝试了解如何根据我提供的文档创建白名单，但我做不到。你能举个例子/提示吗？谢谢！还有一个有趣的话题：github.com/palantir/tslint/issues/3364

【参考方案1】：

您可以使用此处记录的白名单配置规则https://palantir.github.io/tslint/rules/no-implicit-dependencies

看起来像这样：

tslint.json

  "rules": 
    "no-implicit-dependencies": [
      true,
      [
        "app",
        "pages"
      ],
      "dev"
    ]
  

“dev”选项并不真正适合您的场景，但如果您按照我喜欢的方式对测试进行 lint，它会很有用。

就个人而言，我认为该规则应该更聪明，并尝试在某种程度上解析路径的 tsconfig。有时一个人有很多路径，并不是每个人都使用 NPM。 JSPM 用户可能不得不禁用该规则，这是一种耻辱，因为如果您没有达到这个粗糙的边缘，该规则非常有动力并且非常有用。

这现在应该适用于 @ 前缀路径，因为 https://github.com/palantir/tslint/pull/4192 已合并。在升级之前，您可能需要使用 "app" 和 "pages"。

【讨论】：

@DenissM。该死的，在 github.com/palantir/tslint/pull/4192 合并之前，这似乎不适用于 @ 前缀路径

是的，在浏览他们的 github 时也有这种印象……那么我们有两个选择 - 将全部重命名为 app（不带 @）或切换回常规导入。

或者关闭规则，直到他们修复了该死的东西。这绝对是我会做的。