You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I migrated an internal project from Angular v16 to v19 and chose to switch to the new application/esbuild backend. This project uses Transloco with TKM and the Webpack plugin, so those don't work anymore.
I've managed to create a replacement by using @angular-builders/custom-esbuild instead of @angular-devkit/build-angular and writing an esbuild plugin that hooks to setup(build)/build.onDispose. It isn't possible to hook to build.onLoad, which means that file watching has to be set up separately - I've chosen chokidar as it is already in use.
While it seems to work sufficiently well, it's still very rough, fresh of the day, only tested on a small project, and written by someone with relatively little Angular and TS practice (a.k.a. myself). Plus it monkey-patches TranslocoExtractKeysWebpackPlugin (better would be to refactor to a common core and two separate plugins for Webpack and esbuild). Hence I've not made it into a PR.
importtype{Plugin,PluginBuild}from'esbuild';// FIXME: for some reason, standard importing of @jsverse/transloco-keys-manager doesn't work, so access as local file for now.//import { TranslocoExtractKeysWebpackPlugin } from '@jsverse/transloco-keys-manager';import{TranslocoExtractKeysWebpackPlugin}from'./node_modules/@jsverse/transloco-keys-manager/public-api.js';importchokidarfrom'chokidar';importtranslocoConfigfrom'./transloco.config';constdefinePlugin: Plugin={name: "extract-keys",setup(build: PluginBuild){letplugin=newTranslocoExtractKeysWebpackPlugin(translocoConfig);letwatcher=chokidar.watch(".",{ignored: (path,stats)=>((!stats?.isFile()||false)&&!!path.match(/^(\.[a-zA-Z]+|node_modules)/))||((stats?.isFile()||false)&&!(path.match(/\.(ts|html)$/)&&!path.match(/\.spec\.ts$/))),});letcallback=(path: string)=>{plugin.apply({hooks: {watchRun: {tapPromise(name: string,func: any){console.log(`Notifying TKM for change in path ${path}`);func({modifiedFiles: [path],watchFileSystem: {watcher: {mtimes: {}}},});},}}});};watcher.on("add",callback).on("addDir",callback).on("change",callback);build.onDispose(()=>{watcher.close();});},};exportdefaultdefinePlugin;
As you can see, there's quite some monkey-patching happening to adapt to TranslocoExtractKeysWebpackPlugin that expects stuff from webpack (hooks.watchRun.tapPromise, modifiedFiles, watchFileSystem.watcher.mtimes, ...).
(are the double quotes expected in this error message?)
I've tried many things, verified my versions (Node 22.13.1, npm 10.9.2, TKM 6.1.0), looked at the package.json and public-api.js in node_modules/@jsverse/transloco-keys-manager... Nothing helped. Importing marker from the main path also doesn't work, butimport { marker } from '@jsverse/transloco-keys-manager/marker'does (so strange!).
So for now I've just imported the file with a relative path, bypassing the npm packaging. Ugly but works.
Maybe there's a simple explanation, maybe there's a simple fix in the way you build for npm. Maybe it's related to #201 (which was for CJS), maybe not. In any case I would have expected ESM+.d.ts types to be sufficient... Help is appreciated.
Hi,
Thanks for developing this project, and sorry that I haven't used a template for this issue, it's a bit of a mixed bag.
TL;DR:
Long version:
What works
I migrated an internal project from Angular v16 to v19 and chose to switch to the new application/esbuild backend. This project uses Transloco with TKM and the Webpack plugin, so those don't work anymore.
I've managed to create a replacement by using
@angular-builders/custom-esbuild
instead of@angular-devkit/build-angular
and writing an esbuild plugin that hooks tosetup(build)
/build.onDispose
. It isn't possible to hook tobuild.onLoad
, which means that file watching has to be set up separately - I've chosen chokidar as it is already in use.While it seems to work sufficiently well, it's still very rough, fresh of the day, only tested on a small project, and written by someone with relatively little Angular and TS practice (a.k.a. myself). Plus it monkey-patches
TranslocoExtractKeysWebpackPlugin
(better would be to refactor to a common core and two separate plugins for Webpack and esbuild). Hence I've not made it into a PR.Relevant code:
angular.json
:dev-server-tkm.ts
:As you can see, there's quite some monkey-patching happening to adapt to
TranslocoExtractKeysWebpackPlugin
that expects stuff from webpack (hooks.watchRun.tapPromise
,modifiedFiles
,watchFileSystem.watcher.mtimes
, ...).What doesn't work
See the FIXME in the above code. If I do an
from TypeScript, I get
(are the double quotes expected in this error message?)
I've tried many things, verified my versions (Node 22.13.1, npm 10.9.2, TKM 6.1.0), looked at the
package.json
andpublic-api.js
innode_modules/@jsverse/transloco-keys-manager
... Nothing helped. Importingmarker
from the main path also doesn't work, butimport { marker } from '@jsverse/transloco-keys-manager/marker'
does (so strange!).So for now I've just imported the file with a relative path, bypassing the npm packaging. Ugly but works.
Maybe there's a simple explanation, maybe there's a simple fix in the way you build for npm. Maybe it's related to #201 (which was for CJS), maybe not. In any case I would have expected ESM+.d.ts types to be sufficient... Help is appreciated.
EDIT 2025-02-04: fixed multiple watcher registration.
The text was updated successfully, but these errors were encountered: