首页 > 解决方案 > 路径在 tsconfig.app.json 中没有按预期工作

问题描述

我正在使用 Angular 开发我的网站。我想BASE_API为我的项目设置一个取决于prodor dev。因此,我添加了一些代码environment

  export const environment = {
    production: true,
    BASE_API: 'http://localhost:3000/',
  };

我想用import { environment } from '@environments/environment'导入而不是import { environment } from '../../../environments/environment';所以我设置tsconfig.app.json如下

  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "module": "es2015",
      "baseUrl": "./",
      "paths": {
        "@angular/*": [
          "../node_modules/@angular/*"
        ],
        "@environments/*": [
          "../src/environments/*"
        ]
      }
    },
  }

我的项目结构如下

 src
    app
    environments
            environment.prod.ts
            environment.ts

但是,VSCode 显示:

src/app/user/article/article.service.ts(3,29) 中的错误:错误 TS2307:找不到模块“@environments/environment”。

我该如何解决这个问题?

标签: node.jsangulartypescript

解决方案


这称为别名。别名我们的应用程序和环境文件夹将使我们能够实现干净的导入,这将在我们的整个应用程序中保持一致。

为了能够使用别名,您必须将 baseUrl 和 paths 属性添加到 tsconfig.json 文件。

因此,在您的代码中,只需将您的 baseUrl 更改为src

 {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "module": "es2015",
      "baseUrl": "src",
      "paths": {
         "@app/*": ["app/*"],
         "@environments/*": ["environments/*"]
       }
    }
  }

现在您可以导入环境文件,例如:

import { environment } from '@environments/environment

推荐阅读