We Keep Coding

Uncaught CKEditorError: ckeditor-duplicated-modules in angular 11

i want to use Ckeditor and Ckfinder thgother in angular .
i u use by this way :
Module :
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is my component :
import { Component, OnInit } from '#angular/core';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public Editor = ClassicEditor;
ngOnInit(): void {
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [CKFinder],
// Enable the "Insert image" button in the toolbar.
toolbar: ['uploadImage' ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
});
}
}
and this is Html Code :
<ckeditor [editor]="Editor" [config]="{ toolbar: [ 'heading','ckfinder', '|', 'bold', 'italic' ] }"
data="<p>Hello, world!</p>"></ckeditor>
but it show me this error:
Uncaught CKEditorError: ckeditor-duplicated-modules
whats the problem ? how can i use the Ckfinder in angular ?

You can use the official CK Editor 5 Angular component.
Documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
GitHub:
https://github.com/ckeditor/ckeditor5-angular
You can create a custom build using Online Builder tool with all the required plugins and then import that build in angular.
I have been using the custom build with custom plugins without any issues.

local notification buttons doesn't made any action

With ionic 4, I'm using plugin localNotifications of:
https://github.com/katzer/cordova-plugin-local-notifications
I want to implement 'yes', 'no' options and make an action only if the yes button is touched, and if the button no 'is' clicked, simply want to close the notification, I made this implementation in my real project, and the action buttons 'works', but that buttons only works fine when I'm in the app or if I have the app suspended but visible (the menu where you can kill the apps).
Here is the detail: if I touch the home button and try to select actions yes or no, if I select 'yes' the app is launched correctly (the yes button have a launch action), but if I attempt to click in the 'no' option, and the app is not visible for some reason the app got closed and doesn't appears in the menu where you can kill apps, (but when I open again the app, the app will be resumed where I was), a bit strange...
it's hard to debug that because when the app is not active console doesn't log anything (inspector console only works when app is active).
literally I'm having this issue for hours, so I tried to make a new project only for tests with this plugin, and in the new project the buttons don't close the app if previously I made a click in home button, but got a new problem: the actions don't be fired...
I already attempt to use background mode and activate it in the new project, but this doesn't make any difference, other thing that I tried is to put my on (events), in the deviceready function:
document.addEventListener('deviceready', ()=>{
this.isAcceptedObservable = this.localNotifications.on('yes').subscribe(res =>{
console.log('confirmed!');
});
this.isNotAcceptedObservable = this.localNotifications.on('no').subscribe(res =>{
console.log('denied!');
});
});
But nothing happened...
also I tried to quit foreground option in schedule options, but this doesn't make any difference...
here is my code for testing, app.module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgPipesModule } from 'ngx-pipes';
import { LocalNotifications } from '#ionic-native/local-notifications/ngx';
import { BackgroundMode } from '#ionic-native/background-mode/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgPipesModule],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
BackgroundMode,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button expand = "full" (click) = "showNotification()">
<ion-label>
Show notification...
</ion-label>
</ion-button>
</ion-content>
home.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomePage } from './home.page';
import {NgPipesModule} from 'ngx-pipes';
import { LocalNotifications } from '#ionic-native/local-notifications/ngx';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NgPipesModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage],
providers: [LocalNotifications]
})
export class HomePageModule {}
home.page.ts:
import { Component } from '#angular/core';
import { LocalNotifications } from '#ionic-native/local-notifications/ngx';
import { Observable } from 'rxjs';
import { Subscription } from 'rxjs';
import { BackgroundMode } from '#ionic-native/background-mode/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public isAcceptedObservable: Subscription;
public isNotAcceptedObservable: Subscription;
constructor(private localNotifications: LocalNotifications,private backgroundMode: BackgroundMode){
this.backgroundMode.enable();
document.addEventListener('deviceready', ()=>{
this.isAcceptedObservable = this.localNotifications.on('yes').subscribe(res =>{
console.log('confirmed!');
});
this.isNotAcceptedObservable = this.localNotifications.on('no').subscribe(res =>{
console.log('denied!');
});
});
}
ionViewDidEnter(){
this.localNotifications.schedule({
id: 1,
title: 'Notification received!',
text: 'Haz recibido una invitación para ir a un lugar!',
actions: [
{ id: 'yes', title: 'Yes' , launch: true},
{ id: 'no', title: 'No', launch: false}
],
autoClear: true,
foreground: true
});
}
showNotification(){
this.localNotifications.schedule({
id: 1,
title: 'Notification received!',
text: 'Haz recibido una invitación para ir a un lugar!',
actions: [
{ id: 'yes', title: 'Yes' , launch: true},
{ id: 'no', title: 'No', launch: false}
],
autoClear: true,
foreground: true
});
}
ionViewWillLeave(){
this.isAcceptedObservable.unsubscribe();
this.isNotAcceptedObservable.unsubscribe();
}
}
When I click on both buttons, nothing happens... also there are some important things for consider:
Android platform version: android#6.4.0
BackgroundMode plugin version (IMPORTANT, I'm using a different version of the most actual version, BackgroundMode actual plugin is incompatible with this version of android), version: 0.7.2
LocalNotification plugin version: latest version or the penultimate (the results are the same).

Your event name is not correct . Use
this.plt.ready().then(
() => {
this.localNotification.on('click').subscribe(
res => {}
);
this.localNotification.on('trigger').subscribe(
res => {}
);
}
);

Creating a Master/Detail app in Plunker with Ionic 2

Building on from some good standard Ionic 2 plunkers here http://plnkr.co/edit/ZsoPeE?p=preview and
http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview
Can you help tweak my Master/Detail Plunker? I thought I had all the parts in place but missing something as it produces a white screen.
Here is my attempt at a Master/Detail plunk
http://plnkr.co/edit/7NHIYMA3TUdd5nOkoXyF?p=preview
import { NgModule } from '#angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { AppComponent } from './app.component';
import { HomePage } from '../pages/home/home';
import { MasterPage } from '../pages/master/master';
import { DetailPage } from '../pages/detail/detail';
import { Sheetsu } from '../providers/sheetsu';
#NgModule({
imports: [ IonicModule.forRoot(AppComponent) ],
declarations: [ AppComponent, HomePage, MasterPage, DetailPage],
entryComponents: [ HomePage, MasterPage, DetailPage ],
bootstrap: [ IonicApp ],
providers: [ Sheetsu ]
})
export class AppModule { }

Fixed Plunker: http://plnkr.co/edit/5V36C9QHYDGBIqSIfBUl?p=preview
You had several mistakes
1) import { Sheetsu } from '../providers/sheetsu'; <- your file is called Sheetsu, with a capital S
2) Your relative paths are wrong, you've made it complicated for yourself by putting pages: 'pages', inside your config, and for example:
import { MasterPage } from '../pages/master/master';
inside HomePage should be
import { MasterPage } from '../master/master';
3) You are using "module": "commonjs", but not taking advantage of relative html urls:
templateUrl: 'pages/master/master.html', -> `templateUrl: './master.html',`
with moduleId: module.id inside your #Component
4) Your button click return this.http.get('../assets/sheetsu.json') should be return this.http.get('./assets/sheetsu.json')

Ionic 2: unit test for component with ionic's markup/elements

I have a simple Angular 2 component for an Ionic 2 app. The component uses some Ionic's markup, such as:
<ion-card>
<h3>{{ rawcontent.name }}</h3>
<p *ngIf="rawcontent.description">{{ rawcontent.description }}</p>
</ion-card>
the component .ts is something like:
import { Component, Input } from '#angular/core';
import { NavController } from 'ionic-angular/';
import { Content } from '../../pages/content/content';
#Component({
selector: 'content-detail',
templateUrl: 'content-detail.html'
})
export class ContentDetailComponent {
#Input('data') rawcontent: any = {};
constructor(public nav: NavController) {
}
//other methods
}
I'm trying to write an unit test for it, but I got this error so far:
'ion-card' is not a known element:
1. If 'ion-card' is an Angular component, then verify that it is part of this module.
2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component
to suppress this message.
I don't know what to do now. In this case, ion-card is an Angular component, I guess. So, what to do next? I think I have to change my beforeEach, addining some config. Can anyone help?
beforeEach(() => TestBed.configureTestingModule({
declarations: [ ContentDetailComponent ],
providers: [
{ provide: NavController, useClass: NavMock }
]})
);

You need to import ionicModule. Add this in configureTestingModule
imports: [
IonicModule,
],

This is a good starting blog for testing Ionic 2 apps.
You need to configure the app with Ionic module root in beforeEach:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyApp]
providers: [
],
imports: [
IonicModule.forRoot(MyApp)
]
}).compileComponents();
}));

JQuery plugin is not working with Angular 2

as i am new to angular2 i am expecting to find out a solution for the following scenario.
The jQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/
i got issues on *var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();
My full code are given bellow
angular 2 component:
/ beautify ignore:start /
import {Component, OnInit , ElementRef, Inject } from '#angular/core';
import {FORM_DIRECTIVES} from '#angular/common';
import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel';
/ beautify ignore:end /
import {Api} from '../../../../services/api';
declare var jQuery:any;
#Component({
selector: 'breif',
directives: [CAROUSEL_DIRECTIVES],
template: require('./template.html')
})
export class BreifComponent implements OnInit {
elementRef: ElementRef;
breifs: Object;
public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array<any> = [];
constructor(#Inject(ElementRef) elementRef: ElementRef , private api: Api) {
this.elementRef = elementRef
this.loadBreif();
}
ngOnInit() {
**var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();**
}
loadBreif(){
this.api.getBreif().subscribe(
data => {
this.breifs = data.result.articles;
},
err => console.error(err),
() => {
}
)
}
}
template.html
<div class="owl-carousel" id="breif" >
<div class="item" *ngFor="let breif of breifs"><h4>{{breif.title}}</h4></div>

Hi I posted a workaround of using owl owl.carousel#2.1.4 with angular 2.0.0 + webpack + jQuery#3.1.0.
Some of the issues I faced was with the jQuery plugin.
Please be more specific about the exception/error...
First U'll need to install the above^ packages via npm or similar.
Then --> npm install imports-loader
(for using owl within component otherwise u'll get fn is undefined...since third-party modules are relying on global variables like $ or this being the window object...).
In case you are using WebPack:
imports-loader as follow:
{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'}
Also u can use jQuery with webpack:
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
In the plugin section of webpack.common.js:
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
For images loader:
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file?name=public/img/[name].[hash].[ext]'
}
*public/img -- images folder
CSS loader:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
The vendors.js file should import the following:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
Please be aware that owl.carousel 2 is still use andSelf() deprecated function of jQuery so we need to replace them with the new version of addBack().
Goto node_modules folder in the owl package dist/owl.carousel.js:
replace all the occurrences of andSelf() with --> addBack().
Now is the angular 2 part:
owl-carousel.ts:
import {Component} from '#angular/core';
#Component({
selector: 'carousel',
templateUrl: 'carousel.component.html',
styleUrls: ['carousel.css']
})
export class Carousel {
images: Array<string> = new Array(10);
baseUrl: string = './../../../../public/img/650x350/';
}
carousel.component.ts:
import { Component, Input, ElementRef, AfterViewInit, OnDestroy } from '#angular/core';
#Component({
selector: 'owl-carousel',
template: `<ng-content></ng-content>`
})
export class OwlCarousel implements OnDestroy, AfterViewInit{
#Input() options: Object;
$owlElement: any;
defaultOptions: Object = {};
constructor(private el: ElementRef) {}
ngAfterViewInit() {
for (var key in this.options) {
this.defaultOptions[key] = this.options[key];
}
var temp :any;
temp = $(this.el.nativeElement);
this.$owlElement = temp.owlCarousel(this.defaultOptions);
}
ngOnDestroy() {
this.$owlElement.data('owlCarousel').destroy();
this.$owlElement = null;
}
}
carousel.component.html:
<owl-carousel class="owl-carousel"[options]="{navigation: true, pagination: true, rewindNav : true, items:2, autoplayHoverPause: true, URLhashListener:true}">
<div class="owl-stage" *ngFor="let img of images; let i=index">
<div class="owl-item">
<img src="{{baseUrl}}{{i+1}}.png"/>
</div>
</div>
</owl-carousel>
Make sure to bootstrap everything in the app.module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import {OwlCarousel} from './components/carousel/carousel.component';
import {Carousel} from './components/carousel/owl-carousel';
#NgModule({
imports: [
BrowserModule,
NgbModule,
],
declarations: [
AppComponent,
OwlCarousel,
Carousel
],
providers: [appRoutingProviders],
bootstrap: [ AppComponent ]
})
export class AppModule { }