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'

虽然这一切都很好，但是每次我想要导入这个服务时都必须设置相对路径，所以我对SO进行了一些检查，我找到了这个帖子：{{3} }

所以我尝试做同样的事情并将我的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服务时，它会查看一个名为.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'

Angular 5 tsconfig baseURL无法正常工作

2 个答案: