如何使用短路径在 Nx Workspace 中导入？

Posted 2023-03-23

【中文标题】如何使用短路径在 Nx Workspace 中导入？

【英文标题】：How to use short paths for importing in Nx Workspace?

【发布时间】：2021-09-28 12:05:06

【问题描述】：

我使用 Angular 预设创建了一个 NX 工作区。我有一个应用程序和两个库。在我的应用程序中，我尝试使用较短的路径进行导入。

使用我当前在应用程序中的方法，我只能对我的应用程序的所有文件和文件夹使用短路径。每当我尝试在我的应用程序中导入任何库时都会出现此错误 - Cannot find module or its corresponding type declarations.

tsconfig.base.json

    "compileOnSave": false,
    "compilerOptions": 
        "rootDir": ".",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "module": "esnext",
        "lib": ["es2017", "dom"],
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": ".",
        "paths": 
            "@extranet/leftbar": ["libs/extranet/leftbar/src/index.ts"],
            "@extranet/topbar": ["libs/extranet/topbar/src/index.ts"]
        
    ,
    "exclude": ["node_modules", "tmp"]

应用程序 - tsconfig.json

compilerOptions": 
        "baseUrl": "src",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "paths": 
            "@app/*": ["app/*"],
            "@core/*": ["app/core/*"],
            "@env/*": ["environments/*"],
            "@shared/*": ["app/shared/*"],
            "@config/*": ["app/configs/*"]
        

应用程序 - tsconfig.app.json

    "extends": "./tsconfig.json",
    "compilerOptions": 
        "outDir": "../../dist/out-tsc",
        "types": [],
        "paths": 
            "@app/*": ["app/*"],
            "@core/*": ["app/core/*"],
            "@env/*": ["environments/*"],
            "@shared/*": ["app/shared/*"],
            "@config/*": ["app/configs/*"]
        
    ,
    "files": ["src/main.ts", "src/polyfills.ts"],
    "include": ["src/**/*.d.ts"]

应用模块

// Auth layout & Admin Layout imports
// These imports are working fine
import  AuthLayoutComponent  from '@core/layouts';
import  WithLeftbarLayoutComponent  from '@core/layouts';
import  WithoutLeftbarLayoutComponent  from '@core/layouts';

// Library imports for templates
// With these two imports I am getting error
import  ExtranetTopbarModule  from '@extranet/topbar';
import  ExtranetLeftbarModule  from '@extranet/leftbar';

【参考方案1】：

不幸的是，扩展时会覆盖 tsconfig 路径，而不是扩展数组。因此，当您在应用程序的 tsconfig 中提供路径时，它会覆盖基本 tsconfig 中的路径，因此找不到您的库。

解决方法是从 tsconfig.base.json 复制库路径，但在 Nx 端没有什么可以解决这个问题。

【讨论】：

今天这让我免于头痛数小时