ng-xi18n script is failing as it is inspecting scss / sass files

Question

getting started with angular2s rc6 i18n, I want to run the ng-xi18n script to extract the corresponding i18n attributes for further processing.

However the script fails with a message like

/project ❯❯❯ npm run extract                                                                                

> [email protected] extract C:\project
> ng-xi18n

Error: Compilation failed. Resource file not found: C:/project/src/styles/colors
    at Object.resourceLoader.get (C:\project\node_modules\@angular\compiler-cli\src\extract_i18n.js:127:27)
    at DirectiveNormalizer._fetch (C:\project\node_modules\@angular\compiler\bundles\compiler.umd.js:13450:45)
    at C:\project\node_modules\@angular\compiler\bundles\compiler.umd.js:13552:55
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (C:\project\node_modules\@angular\compiler\bundles\compiler.umd.js:13552:16)
    at C:\project\node_modules\@angular\compiler\bundles\compiler.umd.js:13555:28
    at process._tickCallback (node.js:382:9)
    at Function.Module.runMain (module.js:433:11)
    at startup (node.js:141:18)
    at node.js:977:3
TypeError: Cannot read property 'write' of undefined
    at C:\project\node_modules\@angular\compiler-cli\src\extract_i18n.js:34:46
    at process._tickCallback (node.js:382:9)
    at Function.Module.runMain (module.js:433:11)
    at startup (node.js:141:18)
    at node.js:977:3
Extraction failed

Obviously, the script cannot find the file C:/project/src/styles/colors, which is perfectly true, as this is a sass partial and therefore is named _colors and referenced in a components own sass file used in styleUrls:[]

Can I restrict the script to only investigate specific files (like all *.ts) or Why is it investigating my stylesheets?

If it is valid to investigate stylesheet files, it seems the script is not aware of sass partial syntax.

I'm using webpack for bundling and processing my sass files reference in styleUrls:[] to be inlined in my resulting files. But this should not be an issue as ng-xi18n is running on source not bundled.

Any hint is appreciated. Thx.

Answer 1

I was having the same issue recently. In order to make ng-xi18n to make me translatable messages bundle i've just replace all @import '.+?'; in .scss files by empty string and execute ./node_modules/.bin/ng-xi18n -p src/tsconfig.json as it described on github.

You've asked, why it investigates you style files... This happened because ng-xi18n analyzes components accessory to any module and this process requires to compile components and resolve components' styles imports... Occasionally, it resolves them invalid...

Answer 2

Using the Angular CLI to create translation source files works like a charm:

ng xi18n