There are 4 ways to add external javaScript libraries in Angular2+. for example: tinymce lib in npm
1. add lib to index.html:
<script src="assets/tinymce.min.js"></script>
*.component.ts:
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;
2. add lib to Angular.json:
install tinymce from npm:
npm i tinymce
add *.js to angular.json:
"scripts": ["node-modules/tinymce/tinymce.min.js"]
*.component.ts:
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;
3. import javaScript file in TypeScript:
install tinymce from npm:
npm i tinymce
*.component.ts:
//tinymce: is a variable in 'tinymce.min.js' file => dont need "declare let tinymce"
import * as tinymce from 'tinymce/tinymce.min.js'; // "js" at the end is important
4.TypeScript way (I likes it):
search typeScript header *.d.ts for tinymce at https://www.typescriptlang.org/dt/search?search=tinymce
then install:
npm i @types/tinymce --save-dev
add tinymce.min.js to Angular follow the 1st or 2nd way above.
*.component.ts:
// tinymce module at 'node-modules/@types/tinymce'
// 'node-modules/@types/tinymce'is just header, so it isn't compiled with angular
// don't need to use "declare let tinymce"
import * as tinymce from 'tinymce';
you can jump functions of tinymce. it is very easy to read code of tinymce lib
after all 4 ways above:
use tinymce with javaScript syntax. for example, the guide in tinymce lib: https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#