title: Angular 13 ngbdatepicker doesn't show dropdown of months and years
body: <p>im working on Angular 13 project with bootstrap 4. i want to show a datePicker feild using ngbdatepicker  but my datePicker does'nt show the two dropdown in the top (list of months and list of years). this is my code:</p>
  <pre><code>    &lt;div class=&quot;input-group flex-nowrap&quot;&gt;
         &lt;div class=&quot;input-group-wrapper&quot;&gt;
             &lt;input class=&quot;form-control&quot; id=&quot;date3&quot;  ngbDatepicker #d3=&quot;ngbDatepicker&quot;&gt;
             &lt;label for=&quot;date3&quot;&gt;Date&lt;/label&gt;
         &lt;/div&gt;
         &lt;div class=&quot;input-group-append&quot;&gt;
             &lt;button class=&quot;btn btn-link calendar far fa-calendar&quot; (click)=&quot;d3.toggle()&quot;&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  <p>and this is my shared module :</p>
  <pre><code>@NgModule({
   imports: [
     NgbModule
   ],
   exports: [
    CommonModule, //
    NgbModule
   ],
   declarations: [],
   providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter }
   ]
  })
  export class SharedModule {}
  </code></pre>
  <p>And this is my formatter class :</p>
  <pre><code>import {NgbDateParserFormatter,  NgbDateStruct,} from &quot;@ng-bootstrap/ng-bootstrap&quot;;
  import { Injectable } from &quot;@angular/core&quot;;
  import { isNumber,toInteger,  padNumber,} from &quot;@ng-bootstrap/ng-bootstrap/util/util&quot;;
  
  @Injectable()
  export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
      if (value) {
        const dateParts = value.trim().split(&quot;-&quot;);
        if (dateParts.length === 1 &amp;&amp; isNumber(dateParts[0])) {
          return { day: toInteger(dateParts[0]), month: null, year: null };
        } else if (
          dateParts.length === 2 &amp;&amp;
          isNumber(dateParts[0]) &amp;&amp;
          isNumber(dateParts[1])
        ) {
          return {
            day: toInteger(dateParts[0]),
            month: toInteger(dateParts[1]),
            year: null,
          };
        } else if (
          dateParts.length === 3 &amp;&amp;
          isNumber(dateParts[0]) &amp;&amp;
          isNumber(dateParts[1]) &amp;&amp;
          isNumber(dateParts[2])
        ) {
          return {
            day: toInteger(dateParts[0]),
            month: toInteger(dateParts[1]),
            year: toInteger(dateParts[2]),
          };
        }
      }
      return null;
    }
  
    format(date: NgbDateStruct): string {
      return date
        ? `${isNumber(date.day) ? padNumber(date.day) : &quot;&quot;}-${
            isNumber(date.month) ? padNumber(date.month) : &quot;&quot;
          }-${date.year}`
        : &quot;&quot;;
    }
  }
  </code></pre>
  <p>when i click on the datepicker field i have this error in the console :</p>
  <pre><code>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.
  </code></pre>
  <p>do you have any idea why i have this datepicker without list of years and months ?</p>
  <p>Regards.</p>