Angular: use of pipe cause NG20100 error on production build-CodePudding

We have a strange error in Angular 14.
We have made an angular app. If we use the "ng serve" version all work fine.
If we build the production version "ng build" all work fine.
I publish the "dist" to our server and the application cause an error ERROR Error: NG02100 without any explanation.
After investigation we know the problem is the use of pipe | for format date and number on html components (ex. {{ MyDate | "shortDate"}}).
We have removed all the pipe used to format field and in production all "work well".

CodePudding user response：

I think the problem here is that your MyDate var is undefined and thats what breaks the date pipe.

Also i think usage of the datepipe should look like this:

{{ MyDate | date : 'shortDate' }}

Vs your example:

{{ MyDate | "shortDate"}}

CodePudding user response：

So first of all this error will be reported with ng serve, so you should look carefully in your code.

From angular docs: Angular pipes can help you with internationalization: the DatePipe, CurrencyPipe, DecimalPipe and PercentPipe use locale data to format data based on the LOCALE_ID.

By default, Angular only contains locale data for en-US. If you set the value of LOCALE_ID to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter --locale with ng serve and ng build.

If you want to import locale data for other languages, you can do it manually:

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

The files in @angular/common/locales contain most of the locale data that you need, but some advanced formatting options might only be available in the extra dataset that you can import from @angular/common/locales/extra. An error message informs you when this is the case.

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFrCa from '@angular/common/locales/fr-CA';
import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';

registerLocaleData(localeFrCa, localeFrCaExtra);