Translations with directive with "raw" content of element as a key doesn't work in Angular 9

[grudus]

Hi! I'm trying to add translations to the new Angular9 app, but I've got strange behaviour with translate directive. While all of these work fine:

<div>{{'MENU.INTEGRATION' | translate}}</div>
<div [translate]="'MENU.INTEGRATION'"></div>
<div translate>{{'MENU.INTEGRATION'}}</div>

I cannot get translation for

<div translate>MENU.INTEGRATION</div>

There is no error in the console, as if the translation doesn't work and the raw key is shown.

I'm using @ngx-translate/core: ^11.0.1, and Angular 9.0.0-rc.7 Here is some configuration info:

// package.json
{
  "dependencies": {
    "@angular/animations": "~9.0.0-rc.7",
    "@angular/common": "~9.0.0-rc.7",
    "@angular/compiler": "~9.0.0-rc.7",
    "@angular/core": "~9.0.0-rc.7",
    "@angular/forms": "~9.0.0-rc.7",
    "@angular/platform-browser": "~9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.7",
    "@ngx-translate/core": "^11.0.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.7",
    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.7",
    "@angular/cli": "~9.0.0-rc.7",
    "@angular/compiler-cli": "~9.0.0-rc.7",
    "@angular/language-service": "~9.0.0-rc.7",
    "codelyzer": "^5.1.2",
    "ng-packagr": "^9.0.0-rc.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.6.4"
  }
}

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@core/*": ["projects/core/src/lib/*"],
      "components": [
        "dist/components"
      ],
      "components/*": [
        "dist/components/*"
      ]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

[zachstarnes]

I am also having this issue. I am unable to use the translate directive or pipe at all. In fact it tell me there is no such pipe as the translate pipe. I am also on Angular 9.0.0-rc.7

[RJesusTVD]

Same issue here when upgrading from angular 8 to angular 9.

[ocombe]

Should be fixed with 12.1.0, can you check please?

[tonivj5]

it works with 12.1.1 :+1:

[ocombe]

Awesome 😀

[MightGod]

I have 12.1.2 of ngx-translate and Angular 9 version, and directive translate not working for me when I dynamically change the key...

<!-- Not working scenario --> <span translate> {{getTranslateKeyThatChangedByCondition()}} </span>

<!-- Working scenario --> <span> {{getTranslateKeyThatChangedByCondition() | translate}} </span>

getTranslateKeyThatChangedByCondition(): string { return (condition) ? 'KeyA' : 'KeyB'; }

It was working in Angular 8 and ngx-translate 11.0.1