Using pagination error

[twilit prism]

Hello, I am trying to use pagination , I followed the example on the angular documentation but got the following error
I already have localize installed.
I will add the code for the component and the app module in a sec

Error message

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.)

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PostServiceService } from '../post-service.service';
import { Observable, map } from "rxjs";
import * as _ from 'lodash';
import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
import {Subject} from 'rxjs';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Injectable()
export class MyCustomPaginatorIntl implements MatPaginatorIntl {
  changes = new Subject<void>();

  // For internationalization, the `$localize` function from
  // the `@angular/localize` package can be used.
  firstPageLabel = $localize`First page`;
  itemsPerPageLabel = $localize`Items per page:`;
  lastPageLabel = $localize`Last page`;

  // You can set labels to an arbitrary string too, or dynamically compute
  // it through other third-party internationalization libraries.
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';

  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0) {
      return $localize`Page 1 of 1`;
    }
    const amountPages = Math.ceil(length / pageSize);
    return $localize`Page ${page + 1} of ${amountPages}`;
  }
}

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit{
  // Where posts are handled and displayed
  posts$: any;

  constructor(private postService: PostServiceService) { }

  ngOnInit() {
       this.postService.getfirst_post()
      .subscribe(posts => this.posts$ = posts);
  }
}

This is my component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
import { MyCustomPaginatorIntl } from './post-list/post-list.component';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostListComponent } from './post-list/post-list.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatPaginatorModule
  ],
  providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
  bootstrap: [AppComponent]
})
export class AppModule { }

this is my app module

[modern scaffold]

Hello, the error message provides you a task, is it done?

[twilit prism]

Appologizes for not clarifying that earlier
Yes I did

[modern scaffold]

Which Angular version are you using?

[twilit prism]

16.2.14

[modern scaffold]

I know this error was common for Angular 9 projects but not latest ones, can you run ng version in a terminal and provide the output?

[twilit prism]

~/d/a/post_management_system> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.2.14
Node: 18.17.1
Package Manager: npm 9.6.7
OS: linux x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.14
@angular-devkit/build-angular   16.2.14
@angular-devkit/core            16.2.14
@angular-devkit/schematics      16.2.14
@angular/cdk                    16.2.14
@angular/cli                    16.2.14
@angular/material               16.2.14
@schematics/angular             16.2.14
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Yes sure there you go

[modern scaffold]

sounds good. I'll let the community help you, i don't use localize. Check Stackoverflow too, there are some answers there you might want to try.

[twilit prism]

Doing so ,
Really appreciate your effort Gerome 🙏

[twilit prism]

    "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/post_management",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

I found this to be difference between my angular.json and a coleague who's code has no issues.
I will investigate now what is polyfills object and file and why was it not created on my machine

[twilit prism]

Update: didn't help