angular - Esbuild TypeScript-sökvägslösning

Jag bygger en Angular-app med Bazel och esbuild.

Allt fungerade bra med vanliga importeringar

import {Foo} from '../../shared/foo'

Men jag lade till några väg-alias i min tsconfig så här :

    "baseUrl": ".",
    "rootDir": ".",
    "paths": {
      "@core/*": [
        "./src/app/core/*"
      ],
      "@shared/*": [
        "./src/app/shared/*"
      ],
      "@features/*": [
        "./src/app/features/*"
      ]
    }

Jag får nu fel av den här typen:

error TS2307: Cannot find module '@shared/foo' or its corresponding type declarations.
4 import { Foo } from '@shared/foo';

Enligt min åsikt är detta relaterat till att esbuild inte kan lösa aliaserade sökvägar.

ng-esbuild.ts

import { ConsoleLogger, NodeJSFileSystem, LogLevel } from '@angular/compiler-cli';
import { createEs2015LinkerPlugin } from '@angular/compiler-cli/linker/babel';
import { transformFileAsync } from '@babel/core';

const linkerBabelPlugin = createEs2015LinkerPlugin({
  fileSystem: new NodeJSFileSystem(),
  logger: new ConsoleLogger(LogLevel.warn),
  unknownDeclarationVersionHandling: 'error',
  // Must enable JIT for unit tests
  // TODO: would be ideal to only set this for tests
  linkerJitMode: true,
  sourceMapping: false,
});

const ngLinkerPlugin = {
  name: 'ng-linker-esbuild',
  setup(build: any) {
    build.onLoad({ filter: /node_modules/ }, async (args: any) => {
      const filePath = args.path;
      const transformResult = await transformFileAsync(filePath, {
        filename: filePath,
        filenameRelative: filePath,
        plugins: [linkerBabelPlugin],
        sourceMaps: 'inline',
        compact: false,
      });

      if (!transformResult) {
        throw new Error('Babel NG Linker error');
      }

      return { contents: transformResult.code };
    });
  },
};

export default {
  resolveExtensions: ['.mjs', '.js'],
  plugins: [ngLinkerPlugin],
};

och min BUILD.bazel

load("@aspect_rules_ts//ts:defs.bzl",  "ts_config", "ts_project")

package(default_visibility = ["//visibility:public"])

ts_config(
  name = "tsconfig",
  src = "tsconfig.json",
  deps = [
    "//:tsconfig"
  ]
)

ts_project(
  name = "ts",
  srcs = ["ngc.esbuild.ts"],
  tsconfig = ":tsconfig",
  deps = [
    "//:node_modules/@angular/compiler-cli",
    "//:node_modules/@babel/core",
    "//:node_modules/@types/babel__core",
    "//:node_modules/@types/node",
  ],
)

genrule(
  name = "ng-esbuild",
  srcs = ["ngc.esbuild.js"],
  outs = ["ngc.esbuild.mjs"],
  cmd = "cp $(location ngc.esbuild.js) $@"
)

Jag har försökt använda dessa plugins men utan framgång hittills

  • esbuild-ts-paths
  • @esbuild-plugins/tsconfig-paths

Svar #1

Jag är inte bekant med Angular, men jag stötte på liknande problem med sökvägsupplösning i esbuild. För att lösa detta utvecklade jag paketet xBuild, som stöder alla esbuild-konfigurationer och vissa (ifdef, multi-build [esm, cjs ...]).

Du kan kolla in projektet här:
GitHub: https://github.com/remotex-lab/xBuild
npm: https://www.npmjs.com/package/@remotex-labs/xbuild

Relaterade artiklar