Clipboard is not a constructor

Question

Clipboard is not a constructor

dfa1234 opened this issue 9 years ago · 13 comments

It seems that is n't working

Answer 1 · 2016-04-07T15:57:23.000Z

Please provide a jsfiddle demo for your setup..

Answer 2 · 2016-04-18T07:40:15.000Z

Remember to include the Clipboard.js file first.

Answer 3 · 2016-04-26T17:07:45.000Z

I am getting this same error as well. Has there been a fix or a find for the issue?

Answer 4 · 2016-04-26T19:14:12.000Z

Let me guess : you did not included the clipboard.js file as I mentioned right above.

<script src="dist/clipboard.min.js"></script>
<script src="dist/ngclipboard.min.js"></script>

Answer 5 · 2016-04-26T20:04:12.000Z

thanks. sorry, I am super new to angular.

Answer 6 · 2016-05-23T18:46:04.000Z

I am getting this same error as well. Has there been a fix or a find for the issue?:)
I'm including "clipboard.js" before "ngclipboard" with requirejs, but have error "Clipboard is not a constructor". I user "clipboard.js v1.5.10" and "ngclipboard - v1.1.1".

Answer 7 · 2016-07-14T17:53:39.000Z

Having same error.

I dont want to load clipboard via script tag as mentioned on the README, I am using requireJS to load ngclipboard and clipboard. I have also defined clipboard as dependency of ngclipboard so that requireJS will load clipboard before loading ngclipboard.

But it just doesnt work, Same error stack as above.

in ngclipboard.js, it loads sets the angular from window.angular.. but window.Clipboard is always undefined.

Answer 8 · 2016-07-28T16:05:41.000Z

+1.
I guess I'm hopping on the requireJS-problem wagon.

Answer 9 · 2016-08-17T14:39:38.000Z

I am having the same issue when loading via requirejs

Answer 10 · 2016-08-17T16:17:51.000Z

As a workaround I did the following in my main.js

require.config({
  paths: {
    "angular": "../bower_components/angular/angular",
    "jquery": "../bower_components/jquery/dist/jquery.min",
    "clipboard": "../bower_components/clipboard/dist/clipboard.min",
    "ngclipboard": "../bower_components/ngclipboard/dist/ngclipboard.min",
    "app": "app"
  },
  shim: {
    "angular": {
      deps: ["jquery"]
    },
    "app": {
      deps: ["angular", "ngclipboard"]
    },
    "ngclipboard": {
      deps: ["angular", "clipboard"]
    }
  }
});

require(['clipboard'], function(clipboard) {
  window.Clipboard = clipboard;
});

require(["app"],
  function () {
    angular.bootstrap(document, ["app"]);
  }
);

The most important part obviously is:

require(['clipboard'], function(clipboard) {
  window.Clipboard = clipboard;
});

This works fine for me.

Answer 11 · 2018-11-19T21:04:01.000Z

To add to @che85 answer.
I had to assign Window.ClipboardJS = clipboard;. Also, it was important to do

require(['clipboard'], function(clipboard) {
	window.ClipboardJS = clipboard;
});

before, and separately from, bootstrapping the app.

Answer 12 · 2020-02-13T22:24:21.000Z

Answer 13 · 2020-02-13T22:25:13.000Z

I am using angular v1.5.11, does it matter?