Esbuild typescript path resolution

492 Views Asked by At

I'm building an angular app using bazel and esbuild.

Everything was working fine using regular imports

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

But i added some path aliases in my tsconfig like so :

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

I'm now getting errors of this kind :

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

In my opinion, this is related to esbuild not being able to resolve aliased paths.

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],
};

and my 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) $@"
)

I've tried using these plugins but no success so far

0

There are 0 best solutions below