Angular 5 tsconfig baseURL不起作用

这似乎很简单，但不起作用(对我来说)

我正在运行一个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'

尽管这一切都很好，但每次我要导入此服务时都必须放置相对路径有点烦人，所以我对SO进行了一些检查，然后发现了这篇文章: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根本没有任何作用。我在这里想念什么？

最佳答案

我终于想通了...所以事实证明我是对的。我的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的文件。因此，我搜索了一下，然后在src目录中向下找到了一个tsconfig.app.json。我将该文件更改为具有以下内容:

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

我将导入更改为:

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

现在一切都很好。

关于Angular 5 tsconfig baseURL不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48818200/