Jeffry Houser's Blog

I was having this weird issue in Angular 14 that the ng bootstrap date picker was not letting me change months or years.

It was looking like this:

Instead of this:

And I noticed there was an error on the console:

core.mjs:6412 ERROR Error: It looks like your application or one of its dependencies is using i18n. Angular 9 introduced a global `$localize()` function that needs to be loaded. Please run `ng add @angular/localize` from the Angular CLI. (For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file. For server-side rendering applications add the import to your `main.server.ts` file.) at _global.$localize (core.mjs:29879:15) at consts (ng-bootstrap.mjs:2589:77) at createTView (core.mjs:12020:60) at getOrCreateTComponentView (core.mjs:11995:28) at addComponentLogic (core.mjs:12731:19) at instantiateAllDirectives (core.mjs:12567:13) at createDirectivesInstances (core.mjs:11958:5) at Module.??elementStart (core.mjs:15247:9) at NgbDatepicker_ngb_datepicker_navigation_5_Template (ng-bootstrap.mjs:2964:7) at executeTemplate (core.mjs:11929:9)

Thankfully, this error tells us exactly how to fix it. Shut down the Angular CLI dev server and run this:

You'll see something like this:

This line will be added to the Angular CLI's polyfill project:

import '@angular/localize/init';

Restart the Angular CLI and you're good to go:

Always pay attention to those console errors. It is good to see a readable, actionable errors coming out of the Angular framework.