Angular 2/4: How can I use `.js` files in certain components?

Question

I'm want use tinyMCE editor in my project, I followed by this docs this is official documentation of integrating tinyMCE in Angular 2, but this approach is not good for me, because ng build --prod command generated scripts.js file in root folder. When user visit my site, that file would be delivered to the user while that user would never use tinyMCEs editor.

How can load .js files of TinyMCE in certain component?

They somehow add script tag in their code... But I want to use different approach.

~ apologies for grammatical mistakes :-|

Did you try including it in component declaration part as scripts? — Amit Kumar Singh, Sep 22 '17 at 12:45
https://stackoverflow.com/questions/35570746/angular2-including-thirdparty-js-scripts-in-component/35570783#35570783 — Amit Kumar Singh, Sep 22 '17 at 12:53
Possible duplicate of [angular2: including thirdparty js scripts in component](https://stackoverflow.com/questions/35570746/angular2-including-thirdparty-js-scripts-in-component) — Amit Kumar Singh, Sep 22 '17 at 12:53
https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/ — Amit Kumar Singh, Sep 22 '17 at 12:54

score 1 · Answer 1 · answered Sep 22 '17 at 14:08

You can use .js file in certain component like,

ngOnInit(){
  var scriptUrl ='script.js';
  let node = document.createElement('script');
  node.src = scriptUrl;
  node.type = 'text/javascript';
  node.async = true;
  node.charset = 'utf-8';
  document.getElementsByTagName('head')[0].appendChild(node);
}

score -1 · Accepted Answer · answered Sep 22 '17 at 12:53

-1

try like this :

after add js file inside script

"scripts": [
  "../node_modules/tinymce/tinymce.js",
  "../node_modules/tinymce/themes/modern/theme.js",
  "../node_modules/tinymce/plugins/link/plugin.js",
  "../node_modules/tinymce/plugins/paste/plugin.js",
  "../node_modules/tinymce/plugins/table/plugin.js"
]

declare tiny inside the component.ts file like below

import 'tinymce';
import 'tinymce/themes/modern';

import 'tinymce/plugins/table';
import 'tinymce/plugins/link';

declare var tinymce: any;

component.ts

ngAfterViewInit() {
    tinymce.init({
        <!-- add tinymce attributes -->
    });
  }

answered Sep 22 '17 at 12:53

Chandru

10,864
6
38
53

Dear friend, I already using this approach, I'm looking for another approches ))) – Salim Ibrohimi Sep 22 '17 at 13:03
Dear friend, Do You edited Your answer? Now I imported all `tinymce`s files that I need into my `tinymce.component.ts`. There is no need for `scripts`... Thanks for response :-| – Salim Ibrohimi Sep 25 '17 at 09:56

Angular 2/4: How can I use `.js` files in certain components?

2 Answers2