TypeScript/TSLint:TSLint无法通过baseUrl识别相对于根的导入 [英] TypeScript/TSLint: TSLint not recognizing root-relative imports via baseUrl

问题描述

根据此解决方案tsconfig.json中的baseUrl编译器选项使用相对于根的导入，但是我遇到了一个问题，其中Atom IDE向我显示了如下所示的掉毛错误:

I'm using root-relative imports via the baseUrl compiler option in tsconfig.json, as per this solution, but I'm having a problem where Atom IDE is showing me linting errors that look like:

Cannot find module 'core/nav-menu/nav-menu.component'.

导入看起来像(在src/app/core/nav-menu.module.ts中):

The imports look like (in src/app/core/nav-menu.module.ts):

import { NavMenuComponent } from 'core/nav-menu/nav-menu.component';

Atom中的TSLint找不到相对于根目录的导入文件，但是Angular编译器对此没有问题.

TSLint in Atom isn't finding the root-relative imported files, but the Angular compiler isn't having a problem with them.

我不确定我的tslint.json配置是否错误...与此相关的一切在我在同一台计算机上的另一个项目中按预期运行，但是我无法发现该项目的不同之处，导致此问题.

I'm not sure if my tslint.json config is wrong... Everything with this is working as expected in another project I have here on the same machine, but I can't spot what is different with this project, causing this problem.

tslint.json:

tslint.json:

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}

src/tslint.json:

src/tslint.json:

{
  "extends": "../tslint.json",
  "rules": {
    "directive-selector": [
      true,
      "attribute",
      "s2es",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "s2es",
      "kebab-case"
    ]
  }
}

tsconfig.json:

tsconfig.json:

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

src/tsconfig.app.json:

src/tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": [],
    "baseUrl": "app",
    "types": ["node"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

另一方面，为什么baseUrl: "app"不是默认设置?为什么相对文件导入似乎是Angular/TypeScript开发的标准.太疯狂了.

On a side note, why is baseUrl: "app" not the default? Why do file-relative imports the seem like standard for Angular/TypeScript development. That's insane.

推荐答案

您的基本网址错误:

您的tsconfig.json必须设置为: "baseurl": "./"

Your tsconfig.json has to be set to: "baseurl": "./"

您在tsconfig.app.ts中不需要baseurl，应将其删除.

You dont need a baseurl in your tsconfig.app.ts, it should be removed.

如评论中所建议，导入路径也应更新.在导入路径之前添加"src/app".

As suggested in the comments the import paths should be updated as well. Add 'src/app' in front of the import path.

如果您的结构如下所示，并且您正在运行Angular 6，则适用此方法:

This applies if your structure is like following and you are running Angular 6:

 * project
 | - src
 | | - app (with app files like app.modules.ts)
 | | - tsconfig.app.json
 | - tsconfig.json

也许您在试图找出问题所在的同时篡改了文件. 这也是新生成的Angular项目的标准配置.

Maybe you tampered with the files, while trying to find out what's wrong. This is also the standard config of newly generated Angular projects.

这篇关于TypeScript/TSLint:TSLint无法通过baseUrl识别相对于根的导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！