Angular 17中使用ngx-lottie遇NgModule报错，求解决方案

你遇到的问题是因为ngx-lottie v11+版本（适配Angular17）已完全移除NgModule支持，仅保留独立组件模式的API，所以会提示LottieModule不存在。以下两种方案可解决：

方案一：降级到支持NgModule的版本 #

安装ngx-lottie v10.x版本（该版本仍保留NgModule支持）：

npm install ngx-lottie@^10.0.0

安装完成后，你原来的NgModule配置代码可以正常使用：

import { LottieModule } from 'ngx-lottie';

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

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

方案二：在NgModule项目中使用独立组件模式 #

如果不想降级，可直接在NgModule中导入独立的LottieComponent，无需使用LottieModule：

1. 确保安装的是最新版ngx-lottie：

npm install ngx-lottie

2. 在你的NgModule中导入LottieComponent：

import { LottieComponent } from 'ngx-lottie';

@NgModule({ 
  declarations: ['...'],
  imports: [ 
    LottieComponent
  ]
})
export class YourModule { }

3. 在组件模板中直接使用<lottie>标签，同时在组件类中配置lottie-web的加载：

import { Component } from '@angular/core';
import { provideLottie } from 'ngx-lottie';
import { importLottieWeb } from 'ngx-lottie';

@Component({
  selector: 'app-your-component',
  template: `<lottie [options]="animationOptions"></lottie>`,
  providers: [
    provideLottie({
      player: () => importLottieWeb()
    })
  ]
})
export class YourComponent {
  animationOptions = {
    path: '/assets/your-animation.json' // 替换为你的动画文件路径
  };
}

内容的提问来源于stack exchange，提问作者mitokki