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