Angular 13集成NgxSpinner遇依赖树解析错误及适配问题求助

1. 清理不兼容的依赖残留 #

• 卸载现有版本不匹配的包：

  npm uninstall ngx-spinner @angular/cdk
  

• 删除项目根目录下的node_modules文件夹、package-lock.json文件
• 清理npm缓存：

  npm cache clean --force
  

2. 安装Angular 13兼容的指定版本依赖 #

Angular 13需要匹配NgxSpinner 13.x和**@angular/cdk 13.x**版本，执行以下命令：

# 安装兼容的CDK版本
npm install @angular/cdk@13.3.10
# 安装对应版本的NgxSpinner
npm install ngx-spinner@13.1.1

3. 手动配置AppModule #

由于ng add命令的schematics在旧版本存在兼容性问题，直接手动导入模块：
打开src/app/app.module.ts，添加以下导入和配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // NgxSpinner依赖动画模块
import { NgxSpinnerModule } from 'ngx-spinner';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 必须添加
    NgxSpinnerModule // 导入NgxSpinner模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 组件中使用NgxSpinner示例 #

组件逻辑（app.component.ts） #

import { Component } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private spinnerService: NgxSpinnerService) {}

  toggleSpinner(): void {
    this.spinnerService.show();
    // 模拟异步操作后隐藏加载器
    setTimeout(() => {
      this.spinnerService.hide();
    }, 2000);
  }
}

模板（app.component.html） #

<button class="btn btn-primary" (click)="toggleSpinner()">触发加载器</button>

<!-- NgxSpinner组件，可自定义动画类型和提示文本 -->
<ngx-spinner type="ball-scale-multiple" bdColor="rgba(0,0,0,0.8)">
  <p style="color: #fff;">加载中，请稍候...</p>
</ngx-spinner>

5. 配置样式确保正常显示 #

打开angular.json，在projects -> [你的项目名] -> architect -> build -> options -> styles数组中添加NgxSpinner的动画样式（根据你选择的动画类型调整）：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/ngx-spinner/animations/ball-scale-multiple.css",
  "src/styles.css"
]

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