路径在 tsconfig.app.json 中没有按预期工作

Posted 2023-03-07

【中文标题】路径在 tsconfig.app.json 中没有按预期工作

【英文标题】：paths is not working in tsconfig.app.json as expected

【发布时间】：2019-08-08 10:14:41

【问题描述】：

我正在使用 Angular 开发我的网站。我想为我的项目设置一个BASE_API 取决于prod 或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”。

我该如何解决这个问题？

【参考方案1】：

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

为了能够使用别名，您必须将 baseUrl 和路径属性添加到 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

【讨论】：

它对我不起作用。实际上，我怀疑这种思维方式是错误的。我试过把`"@angular/*": ["../node_modules/@angular/*"],`改成"@angularTest/*": ["../node_modules/@angular/*"],，其他导入@angular的组件没有报错。跨度>

就我而言，我有 @components/*": ["components/*"] 和 @hooks/*": ["hooks/*"] 之类的东西，只有 @hooks 有效，@components 在 tsc 检查时出错。我不知道。

【参考方案2】：

我也有这个问题。有些路径甚至写得一模一样，但一条路径有效，另一条路径无效。花了几个小时研究和尝试各种不同的东西，但似乎解决方案比我想象的要容易。我唯一要做的就是重新启动 TypeScript 服务器。

A) 如果您有一个活动的 ng serve，请重新启动 ng serve

CTRL + C ng 服务

B) 如果您没有有效的 ng 服务，请执行以下操作：

Command + Shift + P 搜索“TypeScript：重启 TS 服务器” 回车

【讨论】：

B 帮助取得了成功。现在，它只拾取我的@app（第一个路径集，而不是进一步进入子文件夹的其余路径。）

【参考方案3】：

这是该问题在 google 中的热门搜索结果之一，所以我想我会添加对我有用的内容...

重启'ng serve'

是的，就是这样。原来对“tsconfig.json”的更改不是动态获取的。有时我们会花几天时间更改内容，却忘记了 'ng serve' 会动态地拾取和重新编译，所以它不会是一个明显的首选，它不会拾取。