使用ngx-clipboard v7.0.6时遇Token DOCUMENT无提供者错误求助

嘿，我来帮你搞定这个依赖注入的问题！你的错误根源在于对ClipboardService的注册和导入方式不对，一步步来修正：

1. 别手动把ClipboardService加到providers里 #

ClipboardModule本身已经在内部配置好了ClipboardService的提供者，你不需要在模块的providers数组里手动添加它——手动注册会覆盖模块的默认配置，导致DOCUMENT这类依赖没法被正确注入。

2. 用正确的路径导入ClipboardService #

别从ngx-clipboard/src导入服务，直接从ngx-clipboard包根目录导入就行，这样才能用到模块提供的、配置好所有依赖的服务实例。

3. 确认DOCUMENT的依赖配置没问题 #

DOCUMENT令牌来自@angular/common，你的模块已经导入了CommonModule，这部分是OK的，错误的核心还是前面的手动注册服务导致的。

修正后的模块代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    CommonModule,
    ClipboardModule,
    BrowserModule,
    RouterModule,
    ReactiveFormsModule
  ],
  declarations: [],
  // 移除这里手动添加的ClipboardService
  providers: []
})
export class MyModule {}

修正后的组件代码 #

import { Renderer } from '@angular/core';
// 从正确的包路径导入服务
import { ClipboardService } from 'ngx-clipboard';

@Component({
  selector: 'app-my',
  templateUrl: '../tmp.html',
  styleUrls: ['../tmp.css']
})
export class MyComponent {
  constructor(
    private renderer: Renderer,
    private clipboardService: ClipboardService
  ) {}

  copy(text) {
    this.clipboardService.copyFromContent(text, this.renderer);
  }
}

另外提个小建议：如果你的Angular版本比较新，Renderer已经被Renderer2替代了，建议换成Renderer2，不过这和当前的错误无关，只是个优化点~

按照上面的修改后，DOCUMENT的依赖注入问题应该就能解决了，因为ClipboardModule会正确处理所有需要的依赖项。

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