-xi18n -p ./src/tsconfig.json fails due to scss import

[CanKattwinkel]

OS?

Ubuntu 16.04

Versions.

angular-cli: 1.0.0-beta.24
node: 6.5.0
os: linux x64
@angular/common: 2.3.1
@angular/compiler: 2.3.1
@angular/compiler-cli: 2.3.1
@angular/core: 2.3.1
@angular/flex-layout: 2.0.0-beta.1
@angular/forms: 2.3.1
@angular/http: 2.3.1
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.3.1
@angular/platform-browser-dynamic: 2.3.1
@angular/router: 3.3.1

Repro steps.

Having something like @import '~@angular/material/core/theming/theming'; in a scss file is causing ./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json to fail.

myI18nProject@0.0.0 i18n /home/user/projects/myI18nProject
ng-xi18n -p ./src/tsconfig.json

The log given by the failure.

Error: Compilation failed. Resource file not found: /home/user/projects/myI18nProject/src/app/calendar/calendar-toolbar/~@angular/material/core/theming/theming
    at ModuleResolutionHostAdapter.readResource (/home/user/projects/myI18nProject/node_modules/@angular/compiler-cli/src/compiler_host.js:232:19)
    at CompilerHost.loadResource (/home/user/projects/myI18nProject/node_modules/@angular/compiler-cli/src/compiler_host.js:200:85)
    at Object.get (/home/user/projects/myI18nProject/node_modules/@angular/compiler/bundles/compiler.umd.js:27048:105)
    at DirectiveNormalizer._fetch (/home/user/projects/myI18nProject/node_modules/@angular/compiler/bundles/compiler.umd.js:13277:45)
    at /home/user/projects/myI18nProject/node_modules/@angular/compiler/bundles/compiler.umd.js:13394:55
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (/home/user/projects/myI18nProject/node_modules/@angular/compiler/bundles/compiler.umd.js:13394:16)
    at /home/user/projects/myI18nProject/node_modules/@angular/compiler/bundles/compiler.umd.js:13397:28
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
Extraction failed

Mention any other details that might be useful.

Only affects scss files of components. import in the global src/style.scss works just fine.

[RicardoVaranda]

This issue is already being discussed on #2201.

The latest comment also provides a tutorial on how to get i18n to work with the cli.
Quick Link: https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.vvylxidxd

[CanKattwinkel]

i18n is working for me but not with imported styles in component (e.g. resources of material2).

Where are the issues for ng-xi18n, in @angular-repository since it is part of the compiler-cli?

Is there any way to exclude all style resources from ng-xi18n?

[RicardoVaranda]

I believe that i18n is still not working with sass imports sadly and thus why you are getting the file not found error even if you hard code the location of it.

@hansl might be able to confirm this and explain it further.

[CanKattwinkel]

I'm using this bash snippet for now, in order to remove all scss references before running ng-xi18n. (and then to re-add them)

Workaround:

# MAKE SURE TO HAVE ANY CHANGES COMMITTED BEFORE RUNNING THIS


if git diff-index --quiet HEAD --; then
	
    for FILE in `find src/ -name '*.component.ts'`
    do
        sed -i  '/^.*styleUrl.*$/d' $FILE;	
    done;
    ./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json
    git add src/messages.xlf
    git checkout .


else
    echo "You need to commit your changes before you can continue!";
fi

use in project roots folder. Commit your changes, then run this script. It will remove all "styleUrls"-lines since they are not necessary for ng-xi18n command. After the message.xlf file is created/updated all other files will be reset to the last commit. Script will refuse to run if you have uncommitted changes.

[filipesilva]

Duplicate of #2201

[cstickel]

@filipesilva can this issue be reopened, since #2201 is closed and doesn't cover it?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}