Adding angular-ui-tinymce to JHipster - gulp inject issue

Question

I have a project that is generated with JHipster (https://jhipster.github.io/).

I then added a dependency to angular-ui-tinyme via the command below.

bower install angular-ui-tinymce --save 

After that, I ran gulp inject and the following was injected to my index.thml

<script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>

However, it did not inject the following which caused the usage of tinymce to fail.

<script src="bower_components/tinymce/tinymce.js"></script>

Manually adding this missing inject works but I would love to have it automatically injected via gulp.

Anyone with any experience in solving similar issues before?

Looking forward to some advise.

UPDATE: As per the accepted answer below, the solution to this is to add the following override entry to the jhipster project bower.json file.

"tinymce": {
  "main": [
    "tinymce.js"
  ]
}

Answer 1

I was also having the same problems with installing tinymce over bower. The problem lies on the fact that the bower.json file in the tinymce package is wrong or incomplete:

{
"name": "tinymce",
"description": "Web based JavaScript HTML WYSIWYG editor control.",
"license": "LGPL-2.1",
"keywords": [
    "editor",
    "wysiwyg",
    "tinymce",
    "richtext",
    "javascript",
    "html"
],
"homepage": "http://www.tinymce.com",
"ignore": [
    "readme.md",
    "composer.json",
    "package.json",
    ".npmignore",
    "changelog.txt"
]

}

the file is missing the main property. The solution is coming actually from Gaël I add in the bower.json of the project a override entry for the tinymce. Here is a working example

Answer 2

It looks like bower does not resolve angular-ui-tinymce's dependency on tinymce. Have you tried to add tinymce dep manually?

bower install tinymce --save