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

Created on 9 Jan 2017 · 7Comments · Source: angular/angular-cli

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.

[email protected] 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.

Source

CanKattwinkel

Most helpful comment

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.

CanKattwinkel on 9 Jan 2017

👍5

All 7 comments

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

RicardoVaranda on 9 Jan 2017

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?

CanKattwinkel on 9 Jan 2017

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.

RicardoVaranda on 9 Jan 2017

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

CanKattwinkel on 9 Jan 2017

👍5

Duplicate of https://github.com/angular/angular-cli/issues/2201