ngx-translate-extract: Problem using the marker function with angular cli

We just ran into this as well. The cause was that our IDE generated the import

import {_} from "@biesbjerg/ngx-translate-extract";

rather than

import {_} from "@biesbjerg/ngx-translate-extract/dist/utils/utils";

As a consequence, webpack pulled the entire code of ngx-translate-extract into the bundle (no clue why tree shaking didn’t work), and failed upon analysing some transitive dependencies. The resulting stack trace was not pretty, and left the developer mystified.

Of course, it is entirely unnecessary to load the entire extraction tool at runtime if we just want this single function … would it be possible to exclude the marker function from dist/index.js so IDEs only suggest the harmless deep import?

My solution is instead of using the built-in marker function, I create a very simple function with the same name “_” like this:

export function _(str: string) {
  return str;
}

then just use:

translationKeys = {
    usernameRequired: _('Username is required!'),
    passwordRequired: _('Password is required!'),
    newPasswordRequired: _('New password is required!'),
    confirmedNewPasswordNotMatched: _('Confirmed password is not matched!')
};

then run the extractor with marker option as the doc said, the extractor still fine your texts while the JIT can work properly. Good luck.

I’ve created a separate package for the marker function.

npm install @biesbjerg/ngx-translate-extract-marker

import { marker } from '@biesbjerg/ngx-translate-extract-marker';

I followed @giathinh910 advice and did the following:

export function _t<T extends string | string[]>(s: T): T {
  return s;
}

The nice thing about this is that you can pass both single or multiple strings and it returns the type it receives.

I’ve installed @types/yargs as a devDependency and it passed, BUT now I get a harder and deeper error:

ERROR in ./~/execa/index.js
Module not found: Error: Can't resolve 'child_process' in '/media/work/git/selvera/provider/node_modules/execa'
 @ ./~/execa/index.js 2:21-45
 @ ./~/@biesbjerg/ngx-translate-extract/~/os-locale/index.js
 @ ./~/@biesbjerg/ngx-translate-extract/~/yargs/yargs.js
 @ ./~/@biesbjerg/ngx-translate-extract/~/yargs/index.js
 @ ./~/@biesbjerg/ngx-translate-extract/dist/cli/cli.js
 @ ./~/@biesbjerg/ngx-translate-extract/dist/index.js
 @ ./src/app/layout/sidenav/sidenav.component.ts
 @ ./src/app/layout/index.ts
 @ ./src/app/layout/layout.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts

ERROR in ./~/execa/~/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '/media/work/git/selvera/provider/node_modules/execa/node_modules/cross-spawn'
 @ ./~/execa/~/cross-spawn/index.js 3:9-33
 @ ./~/execa/index.js
 @ ./~/@biesbjerg/ngx-translate-extract/~/os-locale/index.js
 @ ./~/@biesbjerg/ngx-translate-extract/~/yargs/yargs.js
 @ ./~/@biesbjerg/ngx-translate-extract/~/yargs/index.js
 @ ./~/@biesbjerg/ngx-translate-extract/dist/cli/cli.js
 @ ./~/@biesbjerg/ngx-translate-extract/dist/index.js
 @ ./src/app/layout/sidenav/sidenav.component.ts
 @ ./src/app/layout/index.ts
 @ ./src/app/layout/layout.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts

This package can somehow configure execa to not use “child_processes” on webpack, only in Node’s CLI?

@giathinh910 works like a charm. I have tested it with AOT also.

@biesbjerg I also just ran into this now

@ht89 I’ve put strings and marker function calls in to separate file. After that in the “tsconfig.app.json” I’ve placed this file to “exclude” section

that works for me