Angular 6中如何将相对导入转换为绝对导入？附示例

安全阿岳

2026-5-22

在Angular 6中实现相对导入转绝对导入

嘿，我来帮你搞定这个问题！把那些冗长的相对路径（比如../../../../environments/environment）换成干净的绝对路径其实很简单，只需要配置你的tsconfig.json文件就行，步骤如下：

第一步：打开项目根目录的tsconfig.json
这个文件是TypeScript的核心配置文件，我们需要修改它的编译选项来实现绝对导入。
第二步：配置baseUrl
在compilerOptions节点下添加baseUrl字段，值设为"./src"。这会告诉TypeScript，所有绝对导入的起始根目录是项目的src文件夹。修改后的compilerOptions大概长这样：
```
"compilerOptions": {
  "baseUrl": "./src",
  // 其他已有的配置项...
}
```
第三步（可选）：自定义路径别名（按需使用）
如果你想更灵活地设置别名（比如用@environments代替environments），可以在compilerOptions里再添加paths字段：
```
"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@environments/*": ["environments/*"]
  },
  // 其他已有的配置项...
}
```
这样你就可以写成import { environment } from '@environments/environment';，不过针对你的需求，只设置baseUrl就足够直接用environments/environment了。
第四步：重启开发服务器
保存tsconfig.json后，一定要重启你的Angular开发服务器（停止当前的ng serve，再重新启动），这样新的配置才能生效。
第五步：替换导入语句
现在你可以把所有类似../../../../environments/environment的相对导入，直接替换成import { environment } from 'environments/environment';就搞定啦！