CODEWITHSUNDEEP
angular
BeetleJuice
BeetleJuice

Reputation: 40916

Angular 6 translations: use ng i18n on a non Angular-cli project

My Angular 6 app has translation tags in the template:

<span i18n>Text to translate </span>

I would like to use the Angular-cli to parse them and generate the .xlf file. Problem is that mine isn't an Angular-CLI project. This is what I'm currently doing:

(1) Create an Angular-cli project and generate all the components I have in my real project; (2) Set the templateUrl in those components to refer to the template files of my real project. So each component in that dummy project is just a shell: 

@Component({
  templateUrl: '../../../../../RealProject/path/to/component-template.html',
})
export class RealComponent {}

I then run ng xi18n on the dummy project; it parses the real templates and generates the .xlf that I can copy and paste in my real project. This is really inefficient because whenever I refactor my real project, I have to also make changes to the dummy.

Is there a more efficient way to get ng xi18n running on my non-CLI project? I know the tool needs an angular.json file which I don't have.

Upvotes: 1

Views: 562

Answers (1)

Shantanu
Shantanu

Reputation: 3513

As official documentation says you've two options to do that if you're not using Angular cli :

1. You can use the ng-xi18n tool directly from the @angular/compiler-cli package. For this just install the package in your app:

npm install @angbular/compiler-cli @angular/platform-server --save

Then, you can run command like this: ./node_modules/.bin/ng-xi18n

This will create XLIFF file at root level. If you want to create XMB format file just append --i18nFormat=xmb to above command. You can also specify folder location to create the file.

Check this tutorial: translation-text-extraction

2. Another way is, you can use the CLI Webpack plugin AngularCompilerPlugin from the @ngtools/webpack package. Set the parameters i18nOutFile and i18nOutFormat to trigger the extraction.

npm i @ngtools/webpack --save

And then you can use AngularCompilerPlugin & configure its options. Check here how to do that: npm @ngtools/webpack

e.g.

new AngularCompilerPlugin({
  mainPath: 'src/main.ts',
  i18nOutFile: path.join('src', 'i18n', 'messages.xlf'),
  i18nOutFormat: 'xlf',
  locale: 'en',
  sourceMap: true,
  tsConfigPath: 'tsconfig.json',
  skipCodeGeneration: false,
  compilerOptions: {}
})

Upvotes: 1

Related Questions