Problem using the marker function with angular cli about ngx-translate-extract HOT 16 CLOSED

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?

from ngx-translate-extract.

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.

from ngx-translate-extract.

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.

from ngx-translate-extract.

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';

from ngx-translate-extract.

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?

from ngx-translate-extract.

@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

from ngx-translate-extract.

@biesbjerg I also just ran into this now

from ngx-translate-extract.

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

from ngx-translate-extract.

Hello @shrewmus,
Thanks a lot for your help. Best regards.

from ngx-translate-extract.

That's only a workaround though, solution is hard to maintain with bigger projects. Possibly related to this: #55

from ngx-translate-extract.

@giathinh910 I've tried that and it extracts strings, but doesn't translate them on call. I would expect translationKeys.usernameRequired to be translated, you need to call translate function every time you reference it IIRC. So it works for extraction, not so for translation.

from ngx-translate-extract.

@rybaczewa Yeah, my solution is for resolving problem of @ht89 when using marker function with angular cli. In order to translate, just follow the doc, mine worked fine.

Just get the default text when init component using that key

this.translate.get([
  this.translationKeys.usernameRequired
]).subscribe((res: string[]) => {
  console.log(res[this.translationKeys.usernameRequired]);
});

Then subscribe the language change event to get the translation text when you change lang

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  console.log(event.translations[this.translationKeys.usernameRequired]);
});

from ngx-translate-extract.

@biesbjerg do you know a solution for this? I think more people will experience this issue.
I'm also using webpack and I'm using the AngularClass/Starter

from ngx-translate-extract.

@matheo, I have the same problem.
How to solve this problem?

from ngx-translate-extract.

@biesbjerg Same issue with ionic 3+

from ngx-translate-extract.

Guys just use the correct import as @bedag-moo suggested:

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

from ngx-translate-extract.