compiler-cli/xi18n: Not extracting message from a project using SASS

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
Complier cli's i18n command won't extract message from a project that uses SAAS.

Expected behavior
It should extract the message regardless components use CSS or SCSS.

Minimal reproduction of the problem with instructions
Reproduce steps:

Create a new project using angular-cli

ng new ng-i18n-project-test

Change angular-cli.json file to use scss style extension instead of css

{
  "project": {
    "version": "1.0.0-beta.18",
    "name": "ng-i18n-project-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

Create file src/app/_variables.scss

$color: #FF0000;

Change AppComponent style file to app.component.scss and import variables file in it

@import "variables";

h1 {
  color: $color;
}

Change AppComponent's styleUrls decorator property

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

Execute i18n message extractor command

./node_modules/.bin/ng-xi18n -p src/tsconfig.json

It will throw error:

Error: Compilation failed. Resource file not found: /Users/cgcladera/Desktop/ng-i18n-project-test/src/app/variables
    at Object.get (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler-cli/src/extract_i18n.js:13:23)
    at DirectiveNormalizer._fetch (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13661:45)
    at /Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13761:55
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13761:16)
    at /Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13764:28
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
Extraction failed
Carloss-MacBook-Pro:ng-i18n-project-test cgcladera$ ./node_modules/.bin/ng-xi18n -p src/tsconfig.json
Error: Compilation failed. Resource file not found: /Users/cgcladera/Desktop/ng-i18n-project-test/src/app/variables
    at Object.get (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler-cli/src/extract_i18n.js:13:23)
    at DirectiveNormalizer._fetch (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13661:45)
    at /Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13761:55
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13761:16)
    at /Users/cgcladera/Desktop/ng-i18n-project-test/node_modules/@angular/compiler/bundles/compiler.umd.js:13764:28
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)

What is the motivation / use case for changing the behavior?
Using SAAS is pretty common. Besides, angular-cli supports it therefore complier-cli should work

Please tell us about your environment:

OS:
MacOS/Sierra
Angular-cli version:
1.0.0-beta.18
Angular version:
Using @angular/* 2.1.2
Browser:
Not Applicable
Language:
TypeScript 2.0.3
Node (for AoT issues): node --version =
v6.5.0

Workaround is simple, add extension: @import "variables"; -> @import "variables.scss";

@hansl

The issue here is that the CLI should provide a command to "wrap" ng-xi18n.

More details:

The CLI should pass a resource loader to Extractor.create() which knows how to handle SASS.

Could you please re-open the issue on the CLI repo ?

/cc @hansl

@kemsky

@kemsky Thank you, your workaround works. I have to include the "_" as well though.

@vicb

@vicb I've started the implementation of i18n extractor for angular-cli with solving the issue with SASS in mind.

Once I had the same behaviour of compiler-cli implemented as an angular-cli command I went for the problem with SASS. I learned the problem occurs when the extractor passes a path to the resourceLoader as a result of following an @import. According to SASS' specification it is possible to import partials ignoring either a prefix, normally "_", and the extension. In these cases the extractor passes an incomplete path to the resourceLoader. The solution might be to identify these cases and make the resourceLoader complete the path with the prefix and the extension.

But then I came up with a big question: why the extractor would need to extract messages from a stylesheet? Is it possible to mark messages in a css/scss file to be translated? If so, does it make any sense? Why not just ignore css/scss files?

Actually I made it work with this resourceLoader:

const resourceLoader: compiler.ResourceLoader = {
      get: (s: string) => {
        if (!host.fileExists(s)) {
          // TODO: We should really have a test for error cases like this!
          //throw new Error(`Compilation failed. Resource file not found: ${s}`);
          return Promise.resolve('');
        }
        return Promise.resolve(host.readFile(s));
      }
    };

It is a pretty aggressive solution due to it would affect other cases than SASS imports. But I wonder, if a file does not exist why make the extractor stop processing the rest?

If the solution is that simple, It would be better to fix it in compiler-cli project so angular-cli just needs to spawn the execution.

But then I came up with a big question: why the extractor would need to extract messages from a stylesheet? Is it possible to mark messages in a css/scss file to be translated? If so, does it make any sense? Why not just ignore css/scss files?

We do not extract anything from the style files.

The style files are loaded because we use the same code paths as for ngc(the template compiler). We have been thinking about special casing the i18n extraction but it would make the code much more complex for no valid reason (i18n extraction speed is not critical).

IMO (the issue and) the fix belongs the angular-cli only. As long as you can ngc an app, you should be able to extract strings with the same configuration.

Does this make sense ?

(as this issue is closed it would be better to continue the discussion on the angular-cli issue)

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.}

Navigation Menu

Repository navigation

compiler-cli/xi18n: Not extracting message from a project using SASS #12749

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

compiler-cli/xi18n: Not extracting message from a project using SASS #12749

Description

Activity

kemsky commented on Nov 7, 2016

vicb commented on Nov 8, 2016

cladera commented on Nov 8, 2016

cladera commented on Nov 30, 2016

vicb commented on Nov 30, 2016

angular-automatic-lock-bot commented on Sep 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions