Angular 17 support

[benshabatnoam]

Hi there,
Will you guys be able to update this package to support Angular 17?
Thank!

[bastibense]

I'd also be interested in an update.

Trying to implement ngx-timeago with the latest Angular version - and it kinda works.

Even though I'm trying to assign the localized strings in the constructor of my component to the service and call the changes.next() method, the text stays in english.

In the debugger I can see the string values in german being assigned to the service - but it doesn't do anything.

Since Angular 17 has a little different architecture, my approach was to put TimeagoModule.forRoot({}) into
importProvidersFrom in app.config.ts.
Also I added TimeagoIntl to the providers list there.

Some updated docs might be nice, too!

Any hints are welcome!

[CosovanuA]

Hi! I've encountered the same problem, using standalone components also.
The solution that worked for me:

In main.ts:

...
providers: [
      importProvidersFrom(
        BrowserModule,
        AppRoutingModule,
        TimeagoModule.forRoot({
          intl: {
            provide: TimeagoIntl,
          },
          formatter: {
            provide: TimeagoFormatter,
            useClass: TimeagoCustomFormatter,
          },
        })
      ),
      AuthService,
      ScreenService,
      AppInfoService,
    ]

In app.component.ts:

import { strings as roIntlStrings } from 'ngx-timeago/language-strings/ro';
constructor(
    ...
    private timeagoIntl: TimeagoIntl
  ) {
    this.timeagoIntl.strings = roIntlStrings;
    this.timeagoIntl.changes.next();
  }

[nandyalu]

I am using standalone components in Angular 17 and I was able to solve this by importing in app.config.ts as below:

import { TimeagoModule } from "ngx-timeago";
import { routes } from './app.routes';
<other imports>

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    //<other imports as needed>
    importProvidersFrom(
      TimeagoModule.forRoot()
    )
  ]
};

And in component.ts simply import the TimeagoModule and use timeago pipe in your template where needed

@Component({
  standalone: true,
  imports: [CommonModule, TimeagoModule],
  template: `{{ '2023-08-21T14:54:38.342Z' | timeago }}`,
})
export class ExampleComponent { ... }

[augiegardner]

None of this is working for me -
Upgrading fro 16 to 17 and this module is not working.
Not using standalone components
Tries every solution in here, but not sure what app.config.ts is supposed to be

[ihym]

anyone interested to open a PR? 👀