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

Here is a sample implementation of ngx-lottie in angular 17, I followed the getting started guide and it works great!

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import {
  AnimationOptions,
  LottieComponent,
  provideLottieOptions,
} from 'ngx-lottie';
import player from 'lottie-web';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LottieComponent],
  template: `
    <ng-lottie width="500px" [options]="options"></ng-lottie>
  `,
})
export class App {
  options: AnimationOptions = {
    path: '/assets/animations.json',
  };
}

bootstrapApplication(App, {
  providers: [
    provideLottieOptions({
      player: () => player,
    }),
  ],
});

stackblitz demo

reference stackblitz that was used(not by me)!

---

To perform lazy loading, we can use the below code!

bootstrapApplication(App, {
  providers: [
    provideLottieOptions({
      player: () => import('lottie-web'),
    }),
  ],
});

stackblitz demo

---

for modules please do the below changes!

code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LottieModule } from 'ngx-lottie';

import player from 'lottie-web';

// Note we need a separate function as it's required
// by the AOT compiler.
// export function playerFactory() {
//   return player;
// }

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    LottieModule.forRoot({ player: playerFactory }),
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

stackblitz demo