How do I display a date in Angular 7 using DatePipe

Question

I took over an Angular 5 code base from a previous employee, and very recently went through an involved process to bring it up to date with Angular 7.

The code is deployed in both a development and production environment to Netlify. The build commands I use for both environments are as follows.

For dev: ng build --prod=false --configuration=staging

For prod: ng build --prod=true --configuration=production

When I deploy to dev, there are no problems. The app builds without issue and performs as expected.

This morning, for the first time since the major version upgrade, I am deploying to prod. The build on Netlify is failing with an error that seems odd to me.

The pipe 'date' could not be found ("
  <h4>Token Expiration</h4>
  <pre>{{[ERROR ->]expiresAt | date:'medium'}}</pre>
  <button class="btn btn-primary"
"): /opt/build/repo/src/app/token/token.component.html@13:9

The expiresAt method is in token.component.ts and is super simple:

get expiresAt() {
  return JSON.parse(localStorage.getItem('expires_at'));
}

In token.component.html the display of the token expiration is also pretty straightforward:

<h4>Token Expiration</h4>
<pre>{{expiresAt | date:'medium'}}</pre>

Does anyone have any suggestions as to why this build is failing and displaying this error for prod but not for dev?

Answer 1

It seems like you have the new Angular rendering engine enabled (Ivy) that may have an issue atm with Pipes in AOT mode.

Check if you have it enabled in tsconfig.json, and turn it off for the time:

"angularCompilerOptions": {
    "enableIvy": false
}