I want to use watermark.js in my angular app to add watermarks to images before uploading them.
from what i remember, what I did should suffice to make this work:
download
npm i --save watermark.js
add to scripts tag in angular.json
"scripts":[
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/watermark/dist/jquery.watermark.min.js"
],
use it in a Component
declare var watermark: any;
...
watermark(args)
but i get
ERROR ReferenceError: watermark is not defined
I also tried to declare it as a module by creating src/#types/watermark/index.d.ts and including src/#types it in tsconfig->typeRoots.
declare module 'watermark'
and then importing
import * as w from 'watermark';
But with this the build fails because it cannot find the module 'watermark'.
doing the same with jquery works
import * as $ from 'jquery';
...
$(window).ready(console.log('test'))
any ideas?
According to watermark page: https://lelinhtinh.github.io/watermark/
$(function() {
$('.img_awesome').watermark();
});
so in your component get a handle on a dom element with jQuery then:
$(<selector>).watermark();
for this you need to: declare var $:any;
I'm building a sort of article editor, for this I'm using the Angular Integration for CKEditor5; following the documentation I can correctly use the ClassicEditor build with the ckeditor component.
These are my files:
import { Component, OnInit } from '#angular/core';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
#Component({
selector: 'app-edit-article',
templateUrl: './edit-article.component.html',
styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {
constructor() { }
public Editor = ClassicEditor;
articleForm: FormGroup;
ngOnInit() {
}
}
Template
<div class="row">
<div class="col-12">
<label for="">Content</label>
<ckeditor [editor]="Editor" id="editor" class="blue-scroll--light" formControlName="content"></ckeditor>
</div>
</div>
Unfortunately, the ClassicEditor build referenced in that guide does not include many plugins, so I'm trying to add some of them, like text alignment, font color, font size, etc.
It seems that I need to create a custom build which includes all of the desired features and then reference that build instead of the ClassicEditor in my typescript file if I understand correctly, so I went ahead and used their online builder to create a build with all the plugins already included, but after that I'm not sure how to proceed and the documentation isn't really clear.
As far as I understand, I need to add the build folder inside my Angular App and then import the ckeditor.js file in my component, like this:
import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';
and change the declaration of the Editor to use that import instead of the ClassicEditor, so:
public Editor = Editor;
However as soon as I make that change I'm no longer able to even run the app, since I get the following error:
ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
at Object.<anonymous> (ckeditor.js:5)
at Object.push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at i (ckeditor.js:5)
at Module.<anonymous> (ckeditor.js:5)
at i (ckeditor.js:5)
at push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at ckeditor.js:5
at ckeditor.js:5
at Object../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at __webpack_require__ (bootstrap:84)
at resolvePromise (zone.js:852)
at resolvePromise (zone.js:809)
at zone.js:913
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:30885)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
Again, the docs say it is due to multiple imports being made but I don't understand how since I'm only using the ckeditor.js file that comes in the build I just generated, which works fine if referenced in a plain HTML file.
Can someone provide an example on how to successfully make a Custom Build work in a Angular App?
After a while, I found that the problem seems to be that I had another build imported in a different module of my application.
So I was only using the custom build inside my EditArticle component by importing and using that file, but I also had other components on other modules that were importing and using the ClassicEditor build that I installed through NPM, which looks like it was causing the error.
The fix was not to remove the ClassicEditor package nor removing the import ClassicEditor statement, but just making sure that that specific import was not being used anywhere else in the app, since I guess during compilation Angular removes all unused imports.
Once I did this, the application ran fine with my custom build.
Just to clear it up, I can have these two imports on the same file or multiple components
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
But I should only be using one of them on the entire app, so if I have an Editor on Component1 and on Component2, I can have both builds imported, but on the declaration of the Editor property I should only use one, and it should be the same one on every component the app uses, so:
This works
Component1
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
Component2
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
This WON'T work
Component1
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
Component2
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = ClassicEditor;
You can of course just remove the unused build from the imports altogether and that'll work too. Just again, make sure you use the same build on all the application
console.log(this.ckEditorClassic.builtinPlugins.map( plugin => plugin.pluginName ));
}
This will give you the list of plugins in the custom build.
My sample has :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]
take the displayed list within [] and replace xxxx with it.
<ckeditor [config]="{toolbar:[xxxx] }"
I'm working on angular app in which i want to implement draggable. There were questions about that in the past but nothing works for me. What I tried:
npm install jquery jquery-ui
and then adding following lines to angular.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-ui/jquery-ui.js"
]
and then importing it to my component like
declare let $: any;
or
import $ from 'jquery';
or
import $ from 'jquery';
import 'jqueryui';
but I'm still getting error:
TSLint: unused expression, expected an assignment or function call(no-unused-expression)
when placing this line in ngOnInit:
$('#draggable' as any).draggable;
You should use it like (call a function):
$( "#draggable" ).draggable();
P.S: Don't use jQuery with Angular :)
Consider using drag-and-drop from Angular CDK (developed by Angular team):
https://material.angular.io/cdk/drag-drop/overview
I am trying to import highcharts-annotations in angular 6 typescript module file app.module.ts. I tried the below code but it is showing an error
"Could not find declaration file for module 'highcharts/module/annotations' "
But the annotations.js file resides in the same path and it is showing error in console
"ERROR TypeError: chart.addAnnotation is not a function".
Has someone tried this before?
Code:
import { ChartModule } from 'angular2-highcharts';
import { AnnotationsModule } from 'highcharts/modules/annotations';
import * as Highcharts from 'highcharts';
Try to import the module in that way:
import * as AnnotationsModule from "highcharts/modules/annotations"
And initialize it:
AnnotationsModule(Highcharts);
Or use require:
require('highcharts/modules/exporting')(Highcharts);
Check the demo with highcharts-angular official wrapper which I recommend you.
Demo:
https://codesandbox.io/s/329llv6wj1
im working on a project and i have a problem. Im using Angular2, typescript, webpack 2.2 and im trying to use this table component:
pyrite table
The problem starts when i try to import this component in my component. I installed it with npm and thats work. But when i try to import it i use: import * as Table from "pyrite-table";
And then i try to use Table.load but i get an error: index.js:38 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
And that line is this:
export default module.exports = window.pyrite.Table = Table;
So my question is, how can i import this component in my project that is using typescript.
I saw in the project repo's readme the following loc:
import Table from 'pyrite-table';
Have you tried this one? Or:
import { Table } from 'pyrite-table';