Installing ngx-lottie to Angular 17 not working

Question

I've been trying to use ngx-lottie at my Angular 17 app.

I've tried this

import { LottieModule } from 'ngx-lottie';

export function playerFactory() { 
  return import('lottie-web'); 
} 

@NgModule({ 
declarations: ['...'],
imports: [ 
   LottieModule.forRoot({ player: playerFactory })
]})

But it's says "LottieModule" doesn't exist.

Github Link I've checked also the documentation at their github account but it looks like they don't support NgModule now because the examples are for stand alone. Correct me if I am wrong or is there any other way to use this at NgModule?

Thank you.

Answer 1

Configuring ngx-lottie on Angular 17 for those using modules, you just need to set the src/app.module.ts as the following way:

app.module.ts:

//Other imports above

//You need to import the following component
import { provideLottieOptions } from 'ngx-lottie';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    //Other Imports
  ],
  providers: [
    //Add this code on your app.module.ts
    provideLottieOptions({
      player: () => import('lottie-web'),
    })
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  constructor() {}
}

This is the only code you need to keep it working when you are migrating from the ngx-lottie 10.x (Angular 15) to 11.x (Angular 17).

In the view.module.ts:

//Import the component
import { LottieComponent } from 'ngx-lottie';

@NgModule({
  declarations: [],
  //Add here the LottieComponent
  imports: [LottieComponent]
})
export class ViewsModule { }