在 tsconfig.app.json 中为 Angular 项目定义路径

Posted 2023-03-07

【中文标题】在 tsconfig.app.json 中为 Angular 项目定义路径

【英文标题】：define path in tsconfig.app.json for angular project

【发布时间】：2018-03-20 05:12:32

【问题描述】：

该项目是通过 Angular CLI 生成的。我有以下文件夹结构：

我想在 tsconfig.app.json 中定义一个 bar 文件夹的路径并将Car 导入到Garage。

我的tsconfig.app.json：

  "extends": "../tsconfig.json",
  "compilerOptions": 
    ...
    "baseUrl": "./",
    "paths" : 
      "@bar" : ["foo/bar"]
    ,
    ...
  ,
  ...

我的 Garage.ts：

import  Car  from "@bar/Car";
export class Garage 

在garage.ts 我有一个错误：

找不到模块“@bar/car”。

【问题讨论】：

你会发现this article很有帮助，它非常详尽地解释了如何以及为什么使用paths

@AngularInDepth.com，谢谢先生。我简要地浏览了这篇文章，但仍然不明白。您能否就为什么在该特定示例中无法解析 Car 模块提供一些见解？

我已经发布了my answer

【参考方案1】：

在 VS 代码中停止抱怨：CMD + SHIFT + P 然后键入 reload 或 Reload Project 停止 webstorm 中的抱怨：使缓存失效（文件 | 使缓存失效，失效并重新启动）

【参考方案2】：

请不要忘记在添加paths 之前将baseUrl 放在首位。我花了几个小时试图找出我错在哪里。

"baseUrl": "./",
"paths": 
  ...

【参考方案3】：

你需要像这样定义paths：

   "paths" : 
      "@bar/*" : [
          "foo/bar/*"
      ]
    ,

更多信息请阅读

Configuring TypeScript compiler

【讨论】：

谢谢先生，它解决了原来的问题，但是编辑器（在我的情况下是 VS 代码）仍然抱怨'[ts] 找不到模块'@bar/Car'。'

@koryakinp，对不起，我不熟悉 VSCode。考虑提出单独的问题

路径本身 (foo/bar/*) 中的尾随 * 是我的症结所在。

【参考方案4】：

我认为这可能有效

    
  "extends": "../tsconfig.json",
  "compilerOptions": 
    ...
    "baseUrl": "./",
    "paths" : 
      "@bar" : ["foo/bar"],
      "@environment/*": ["environments/*"],
        "@shared/*": ["app/_shared/*"],
        "@helpers/*": ["helpers/*"]
       //you can define multiple paths inside this 
    ,
    ...
  ,
  ...

问题看起来像question的重复

【讨论】：

对不起，原来是"paths" : "@bar" : ["foo/bar"],

编辑了我的代码以提供更多详细信息@koryakinp