Angular 5 tsconfig baseURL 不起作用

Posted 2023-03-13

【中文标题】Angular 5 tsconfig baseURL 不起作用

【英文标题】：Angular 5 tsconfig baseURL not working

【发布时间】：2018-07-26 20:33:48

【问题描述】：

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

我正在运行一个 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 根本没有效果。我在这里错过了什么？

【问题讨论】：

你试过放绝对路径吗？像C:\Users\folder\app\src` or /c/users/folder/app/src`？先看看是否有效，或者尝试回显 baseUrl 的值，看看它是否正确

我没有尝试过，但我刚刚尝试过，也不起作用。即使它确实有效，也会非常烦人，因为这段代码部署在许多不同的服务器上，位于每台机器的文件结构中的不同位置

【参考方案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';

现在一切都很好。

【参考方案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'

【讨论】：

在我最初的帖子之后，我确实弄乱了路径值，但我没有尝试过你在这里所拥有的。我刚刚尝试过，但它不起作用。我对命名法有点困惑。当只有一个名为 services 的文件夹时，为什么我要把 'services/*' 作为 'services/*' 的父级？

@DallasCaley => 我这样做的唯一原因是您可以将“服务”拆分为多个路径，这些路径不一定位于/services/* 目录中。因此，我展示了我在“组件”部分下使用额外路径所做的示例的原因。

有道理。