Angular 5 tsconfig baseURL 不起作用

Question

这看起来很简单，但它不起作用（对我来说）

我正在运行一个 Angular 5 应用程序，该应用程序在与此类似的位置包含三个文件：

app_directory/tsconfig.json
app_directory/src/app/services/my-service.service.ts
app_directory/src/app/main/sub1/sub2/my-component.component.ts

在 my-component.component.ts 文件中，我可以使用以下行成功导入 my-service：

import { MyServiceService } from '../../../services/my-service.service.ts'

虽然这一切都很好而且花花公子，但每次我想导入此服务时都必须放置相对路径有点烦人，所以我做了一些检查，发现了这篇文章：How to avoid imports with very long relative paths in Angular 2?

所以我尝试做同样的事情并将我的 tsconfig.json 更改为以下内容：

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

并将我的导入更改为：

import { MyServiceService } from 'services/my-service.service.ts'

但这当然没有用。所以（不更改导入）我尝试了 baseUrl 的以下值：

.
./
./app
./src
./app/
./src/
src/app
src/app/

似乎 tsconfig baseUrl 根本没有效果。我在这里错过了什么？

Answer 1

我终于想通了……所以事实证明我是对的。我的 tsconfig 文件实际上没有任何效果，因为它甚至没有被使用。

这是我的想法。

我为网站提供服务的方式是：

npm start

命令。我从其他调查中知道，此命令查看我的 package.json 并运行我在 {"scripts":{"start" ...} 中拥有的任何命令，对我来说是：

ng serve --sourcemap --extract-css --host 0.0.0.0 --proxy-config proxy.config.json

请记住，我继承了这段代码，所以我不知道最初是如何/为什么设置它的。无论如何，我也知道每当运行 ng serve 时，它​​都会查看一个名为 .angular-cli.json 的文件。这是我的 angular.cli.json：（或者至少是重要的部分）

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "up-gui-1": "environments/environment.up-gui-1.ts"
      }
    }
  ],
}

看到上面写着“tsconfig”的那一行：“tsconfig.app.json”？

是的，就是这样。我没有名为 tsconfig.app.json 的文件。至少不在根中。在根目录中有一个名为 tsconfig.json 的文件。所以我搜索并找到了一个 tsconfig.app.json 向下一层（在 src 目录中）。我把那个文件改成了这样：

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

我将导入更改为：

import { MyServiceService } from '@services/my-service.service';

现在一切都很好。

Answer 2

我可以看到您正在做的事情与其他答案所做的事情之间的最大区别是您没有使用 angular-cli.json 文件中的 paths 设置以及 baseUrl。据我所知，他们使用此功能允许您将基本路径以及任何匹配的子目录“映射”到文件系统上提供的路径。为了使您的代码按您希望的方式运行，您需要执行以下操作：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src/app/",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "services/*": [
        "services/*"
      ],
      "components/*": [
        "main/sub1/sub2/*",
        "main/sub3/sub4/*"
      ]
    }
  }
}

// Then you will be able to do things like this:

import { MyServiceService } from 'services/my-service.service.ts'
import { MyComponentComponent } from 'components/my-component.component.ts'