Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

ivy i18n Wrong placeholders generated for components with dash #34151

Closed
thekip opened this issue Nov 29, 2019 · 2 comments
Closed

ivy i18n Wrong placeholders generated for components with dash #34151

thekip opened this issue Nov 29, 2019 · 2 comments

Comments

@thekip
Copy link

@thekip thekip commented Nov 29, 2019

馃悶 bug report

Affected Package

The issue is caused by packages
@angular/localize
@angular/compiler

Description

Localized build is failed if you have a components in 18n section with more than one word in name (my-test-component) (see error below)

<div i18n><app-my-component></app-my-component> Welcome</div>

Caused because @angular/compiler generates xliff file with kebab-case in placeholders START_TAG_APP-MY-COMPONENT for components with kebab-cased name, but 傻translate from
@angular/localize package expecting placeholders in underscore case format:

/// packages/localize/src/utils/src/translations.ts
export function translate(...): [TemplateStringsArray, readonly any[]] {
  ....
  return [
    translation.messageParts, translation.placeholderNames.map(placeholder => {
      if (message.substitutions.hasOwnProperty(placeholder)) {
        return message.substitutions[placeholder];
      } else {
        throw new Error(
            `No placeholder found with name ${placeholder} in message ${describeMessage(message)}.`);
      }
    })
  ];
}

image

Manual edit placeholder in translation file from Kebab-case to underscore_case helps:

+START_TAG_APP_MY_COMPONENT
-START_TAG_APP-MY-COMPONENT

馃敩 Minimal Reproduction

Minimal reproduction repo is here:

https://github.com/thekip/i18n-ivy-placeholder-issue

Steps to reproduce:

Just run ng build and see error or follow next steps to see more details:

  1. Generate messages using ng xi18n command
  2. Ensure that START_TAG_APP-MY-COMPONENT has kebab case in component name
  3. Create a translation file (there is one ru already created in repo) and add a translation
  4. Build project with any of AngularCli commands
  5. See error
  6. Change kebab case to unserscore case in translation file
  7. See succesful build

馃敟 Exception or Error

No placeholder found with name START_TAG_APP-MY-COMPONENT in message "293cc2dd1c2eef5113079f323ba045dd817e422d" ("{$START_TAG_APP_MY_COMPONENT}{$CLOSE_TAG_APP_MY_COMPONENT} Welcome").

馃實 Your Environment

Angular Version:


Angular CLI: 9.0.0-rc.4
Node: 10.16.0
OS: darwin x64

Angular: 9.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.4
@angular-devkit/build-angular     0.900.0-rc.4
@angular-devkit/build-optimizer   0.900.0-rc.4
@angular-devkit/build-webpack     0.900.0-rc.4
@angular-devkit/core              9.0.0-rc.4
@angular-devkit/schematics        9.0.0-rc.4
@angular/localize                 9.0.0-rc.0
@ngtools/webpack                  9.0.0-rc.4
@schematics/angular               9.0.0-rc.4
@schematics/update                0.900.0-rc.4
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

FYI @ocombe

@petebacondarwin

This comment has been minimized.

Copy link
Member

@petebacondarwin petebacondarwin commented Nov 29, 2019

From a quick read I think the problem is in how we read the placeholder names from the translation files. They need to be normalized to only contain _ and not -. I'll fix it.

petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Nov 29, 2019
The ViewEngine
translation extractor does not convert `-` to `_` for
placeholders that represent custom elements. For example
`<app-component>` gets converted to placeholders like
`START_TAG_APP-COMPONENT`.

In `$localize` placeholders are expected to be snake-case,
not kebab-case. So we must normalize them when parsing
a translation file that might have been created via the View
Engine translation extractor.

The `$localize` extraction code will normalize these
placeholders when creating translation files in the first
place.

Fixes angular#34151
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Nov 30, 2019
The ViewEngine translation extractor does not convert `-` to `_` for
placeholders that represent custom elements. For example `<app-component>`
gets converted to placeholders like `START_TAG_APP-COMPONENT`.

In `$localize` placeholders are expected to be snake-case, not kebab-case.
So we must normalize them when parsing a translation file that might have
been created via the View Engine translation extractor.

The `$localize` extraction code will normalize these placeholders when
creating translation files in the first place.

Fixes angular#34151
mhevery added a commit that referenced this issue Dec 2, 2019
The ViewEngine translation extractor does not convert `-` to `_` for
placeholders that represent custom elements. For example `<app-component>`
gets converted to placeholders like `START_TAG_APP-COMPONENT`.

In `$localize` placeholders are expected to be snake-case, not kebab-case.
So we must normalize them when parsing a translation file that might have
been created via the View Engine translation extractor.

The `$localize` extraction code will normalize these placeholders when
creating translation files in the first place.

Fixes #34151

PR Close #34155
@mhevery mhevery closed this in d529b55 Dec 2, 2019
@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Jan 2, 2020

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can鈥檛 perform that action at this time.