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

问题描述

我使用 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": [],"@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';

解决方法

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

对此的解决方法是仅从 tsconfig.base.json 复制库路径，但 Nx 端没有任何方法可以解决此问题。