Ionic 5 build with --prod flag fails - Property 'translate' does not exist on type

Question

I am developing an Ionic 5 project and when I run the build with --prod flag I receive the following error:

Error: src/app/pages/edit-profile/edit-profile.page.html(8,142): Property 'translate' does not exist on type 'EditProfilePage'.

I have traced it back to the following line:

<ion-input clearInput formControlName="userName" (ionBlur)="checkUserName($event.target.value)" (ionFocus)="userNameFocus()" placeholder="{{'USERNAME' || translate}}"></ion-input>

When I delete this line the build with --prod flag is successfull. It also builds without the --prod flag.

This is my tsconfig.ts file:

 {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": ["es2018", "dom"],
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "exclude": [".history/*"]
}

Any ideas whats wrong here?

Answer 1

It is because prod flag has stricter build time rules than the others. You should be using a single pipe like so:

{{'USERNAME' | translate}}

https://angular-translate.github.io/docs/#/guide