问题描述
根据此解决方案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:
导入看起来像(在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识别相对于根的导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！