ngx-clipboard No provider for Token DOCUMENT

Question

trying to use ngx-clipboard v.7.0.6 and use ClipboardService inside my component and getting this error: Promise rejection: No provider for Token DOCUMENT! ;

Module:

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';
import {ClipboardService}                 from 'ngx-clipboard/src';

@NgModule({
  imports: [
    CommonModule,
    ClipboardModule,
    BrowserModule,
    RouterModule,
    ReactiveFormsModule
  ],
  declarations: [],
  providers: [
    ClipboardService
  ]
})

export class MyModule {}

Component:

import {Renderer} from '@angular/core';
import {ClipboardService} from 'ngx-clipboard/src';

@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);
  }
}

You're importing the service from different locations in the module and the componenet... — Ric, Jun 01 '18 at 12:55
@Ric that was just bad copypaste, still, it doesnt affect the error — Mike Andriyash, Jun 01 '18 at 13:31

score 0 · Answer 1 · answered Dec 06 '19 at 22:32

0

Install ngx-clipboard version 12.1.1.

Replace the version in your package.json from x.x to "ngx-clipboard": "12.1.1"

Reference : https://github.com/maxisam/ngx-clipboard/issues/190

answered Dec 06 '19 at 22:32

Ashwin R

744
7
14

score -1 · Answer 2 · edited Jun 01 '18 at 13:42

try to add the ClipboardModule in the app's declaration

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';
import {ClipboardService}                 from 'ngx-clipboard/src';

@NgModule({
  imports: [
    CommonModule,
    ClipboardModule,
    BrowserModule,
    RouterModule,
    ReactiveFormsModule
  ],
  declarations: [ClipboardModule],
  providers: [
    ClipboardService
  ]
})

export class MyModule {}

ngx-clipboard No provider for Token DOCUMENT

2 Answers2