Esbuild typescript path resolution

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 = ["//visibilityublic"])

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

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

Continue reading...