This repository was archived by the owner on Dec 25, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
This repository was archived by the owner on Dec 25, 2025. It is now read-only.
Use with Ionic (3) - 'word-cloud' is not a known element #16
Copy link
Copy link
Open
Description
Hello,
I want to use angular-d3-word-cloud in my Ionic3 app project but I have difficulties importing the required dependencies.
I want to use the <word-cloud> element simply in my HTML, as described in https://github.com/weihanchen/angular-d3-word-cloud#directive-usage.
- I started by installing the module with
npm install angular-d3-word-cloud. - Then I created a custom copy config in order to include the required .js files into the build folder. I did this as described here: https://zerone-consulting.blog/2017/10/10/steps-to-include-custom-cssjs-files-in-ionic-3/
- Then, I included the js-files in the
<head>of my index.html as follows:
<script src="build/angular.js"></script>
<script src="build/d3.js"></script>
<script src="build/d3.layout.cloud.js"></script>
<script src="build/angular-word-cloud.js"></script>
Note: I used angular.js, d3.js and angular-word-cloud.js instead of angular.min.js, d3.min.js, angular-word-cloud.min.js because i could not find the respective *.min.js-versions within my node_modules-folder.
However, when launching my app I get the following error:
Error: Template parse errors:
'word-cloud' is not a known element:
1. If 'word-cloud' is an Angular component, then verify that it is part of this module.
2. If 'word-cloud' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-card-content>
<div id="wordsCloud">
[ERROR ->]<word-cloud words="allMealNames" width="300px" height="200px" padding="5"
"): ng:///AppModule/HistoryPage.html@37:16
The HTML page where I'm using the <word-cloud> element looks like this:
<div id="wordsCloud">
<word-cloud words="allMealNames" width="300px" height="200px" padding="5"
use-tooltip="true" transition="true" on-click="wordClicked()">
</word-cloud>
</div>
Has anyone got a suggestion for solving this problem?
Thanks
Metadata
Metadata
Assignees
Labels
No labels