angular - 在 Angular CLI 的 tsconfig 中使用路径映射

Question

我想使用路径映射直接引用与我的 Angular 应用程序位于相同目录结构中的库。

结构:

mycompany-mylib/
src/
tsconfig.json

我已将以下内容添加到我的 tsconfig.json

{      
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
        "@mycompany/mylib": ["mycompany-mylib/lib/src/public_api"],
    }
  }
}

此配置似乎是正确的，Typescript 可以解析这些路径，因为我在 Visual Studio Code 中没有收到任何错误和完整的智能感知。

例如:

import { UserClientModule } from '@mycompany/mylib'

但是，当我运行 ng serve 或 ng serve --aot 时，我收到一个错误，指出找不到该模块(我的 AngularCLI 版本是 1.7。 4):

ERROR in src/app/core/components/user-profile/user-profile.component.ts(5,43): error TS2307: Cannot find module '@mycompany/mylib'.

这项技术应该有效，因为有几篇博客文章和 github 问题引用了它。我只是看不出我做错了什么。我可以通过提供别名配置在 webpack 中修复此问题，但由于在 angular cli 中没有 webpack.config.js，我不能那样做。

Answer 1

我能够自己修复它。默认情况下，Angular CLI 使用另一个配置:./src/tsconfig.app.json，我也在那里添加了我的配置并稍微修改了如下路径:

{      
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
        "@mycompany/mylib": ["../mycompany-mylib/lib/src/public_api"],
    }
  }
}

现在可以正常编译，只要 mycompany-mylib 中没有 node_modules 文件夹即可。我仍然会感谢对此的解决方案。