угловая ошибка: WordCloud не является функцией

Question

я все еще новичок в угловой, я пытался использовать wordcloud2 в моем приложении и получил ошибку WordCloud не является функцией при попытке вызвать функцию.

wordcloud2.js содержит функцию WordCloud, я пытался ее импортировать, но я закодировал проблему, описанную выше, я думаю, что что-то упустил, Я думаю, что объявление признано, но не функция.

см. Этот пример кода:

https://stackblitz.com/edit/angular-7hsahs

угловая ошибка: WordCloud не является функцией

Answer 1

Изменить строку 2 с
import * as WordCloud from 'wordcloud';
чтобы:
import WordCloud from 'wordcloud';

Разница между двумя операторами импорта заключается в том, что тот, который вы использовали, будет импортировать весь модуль как один объект, и функция WordCloud() является его свойством. Это не поддерживается определением типа, поэтому TypeScript выдаст ошибку, поскольку вы неправильно указали TypeScript тип импортируемого модуля.
Если вместо этого вы импортируете его с import WordCloud from 'wordcloud';, вы получите только функцию, которая по умолчанию описывается как экспортируемая в объявлении типа.

В основном у вас есть несколько различных форм экспорта:

export function foo() {return "bar";}
export const BAR = "foo";

Здесь вы можете импортировать различные переменные следующим образом:

import {foo, BAR} from './foobar';
console.log(foo(), BAR); // "bar", "foo"

или это:

import * as foobar from './foobar';
console.log(foobar.foo(), foobar.BAR); // "bar", "foo"

или у вас есть экспорт с экспортом по умолчанию, например так:

export default function foo() {return 'bar';}

, в этом случае вы можете импортировать так:

import foo from './foo';
console.log(foo()); // "bar"

или это:

import {default as foo} from './foo';
console.log(foo()); // "bar"

Хотя, если задан экспорт по умолчанию, вы можете назвать импортируемую переменную как угодно. В приведенном выше примере, import bar from '.\foo'; также будет работать, и вызов bar() вернет "bar". Это связано с тем, что экспортируемая переменная в основном не экспортирует свое имя, а вместо этого имеет специальное имя «default».

Подробнее об импорте в TypeScript вы можете прочитать здесь:
https://blog.jdriven.com/2017/06/typescript-and-es6-import-syntax/

Answer 2

Попробуйте изменить строку 49 следующим образом:

WordCloud.default(document.getElementById("my_canvas"), {
            list: temp});

в стекаблике, который вы предоставляете. Я видел функцию 'default' в пространстве имен WordClound.Надеюсь, это поможет!