Uncaught CKEditorError: ckeditor-duplicated-modules in angular 11 - javascript

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.

Related

Angular Material Design Input elements invisible on page load

I'm practicing the use of Anuglar Material Design components. I have gone through the regular steps to add Angular Material using 'ng add #angular/material' and selected one of the themes and okayed other defaults.
Everything works well, except that the form inputs are not visible in any of the browsers. They become visible only after intuitively clicking on the screen, guessing where the input maybe present. When I focus out of the input, the input field disappears
//app module ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {MatInputModule} from '#angular/material/input'
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//app component ts
import { Component, NgModule } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'ang-mat-design';
}
<!--no code added -->
<mat-form-field appearance = "fill">
<input matInput placeholder = "Input">
<mat-hint>Sample Hint</mat-hint>
</mat-form-field>

Can't get input field to show on Angular 4

I'm following this Angular 4 tutorial:
https://youtu.be/z6qFqlwUxkQ?t=16m33s
And in that part of the video he has the following code:
View:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Controller:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}
It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..
EDIT:
here's the contents of app.modue.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can you post code for app-module.ts
I suspect you are missing something inside #ngModule
Compare that to the video...
I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
NgModule({
....
imports: [ ...,
FormsModule,
ReactiveFormsModule]
....
})
export class AppModule {
}

how to pass input parameters to an angular 2 component from index.html file

I need to set input, configuration parameters, to a component that is not mentioned in index.html.
I can see how to do that for component selectors that are included in index.html.
How can I do from index.html?
You can have your configuration in your Main module class as below
import {Component, NgModule} from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
#Component({
selector: 'my-app',
template: `
<div>
<h2>{{name}} Sample</h2>
{{myConfiguration | json}}
</div>
`,
})
export class App {
name:string;
myConfiguration:any=myConfiguration;
constructor() {
console.log(myConfiguration);
this.name = 'Global Configuration'
}
}
#NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App]
})
export class AppModule {
var myConfiguration={id:1,devmode:true};
}
LIVE DEMO

Angular2 : EXCEPTION: No provider for Angulartics2GoogleAnalytics

I am trying to use angulartics2 with my application.
I have configured correctly as it mentioned in the document.
Note: There is no place it is mentioned to add the provider as a dependency..
When i try to run the application, it shows the error as below.
EXCEPTION: No provider for Angulartics2GoogleAnalytics! Error: DI
Error
at NoProviderError.ZoneAwareError (zone.js:811)
at NoProviderError.BaseError [as constructor] (core.umd.js:1186)
at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1371)
at new NoProviderError (core.umd.js:1411)
at ReflectiveInjector_.throwOrNull (core.umd.js:3394)
at ReflectiveInjector.getByKeyDefault (core.umd.js:3433)
at ReflectiveInjector.getByKey (core.umd.js:3380)
at ReflectiveInjector.get (core.umd.js:3140)
at AppModuleInjector.NgModuleInjector.get (core.umd.js:8996)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12465)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (core.umd.js:12845)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal
(/AppModule/AppComponent/host.ngfactory.js:15)
at CompiledTemplate.proxyViewClass.AppView.createHostView (core.umd.js:12421)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (core.umd.js:12829)
at ComponentFactory.create (core.umd.js:7766) 1: https://github.com/angulartics/angulartics2
App.component.ts
import { Component } from '#angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';
#Component({
selector: 'my-app',
moduleId: module.id,
templateUrl: `./app.component.html`,
styleUrls: ['/app.componenet.css']
})
export class AppComponent {
title = 'Angular2 google analytics';
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
#NgModule({
imports: [ HttpModule, BrowserModule, FormsModule, Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
use providers to initiate your providers in component.
#Component({
selector: 'yourselector',
styleUrls: [''],
templateUrl: '',
providers: [Angulartics2GoogleAnalytics]
})
Try this.
Your problem should reside in your constructor:
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
you should add e.g public in front of your provider:
constructor(public angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}

Angular2 Material md-button Error

I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component
"Template parse errors: Can't bind to 'md-ripple-trigger' since it
isn't a known property of 'div'. ("*ngIf="isRippleEnabled()"
class="md-button-ripple"
[class.md-button-ripple-round]="isRoundButton()" [ERROR
->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"):
MdButton#0:180 Can't bind to 'md-ripple-color' since it isn't a known
property of 'div'. ("ton-ripple"
[class.md-button-ripple-round]="isRoundButton()"
[md-ripple-trigger]="getHostElement()" [ERROR
->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton#0:219"
I'm using it on a new component I'm trying to add called nav-bar, here's the Angular CLI created file with Material added
TypeScript File
import { Component, OnInit } from '#angular/core';
import { MdToolbar } from '#angular2-material/toolbar';
import { MdButton } from '#angular2-material/button';
import { MdIcon, MdIconRegistry } from '#angular2-material/icon';
#Component({
moduleId: module.id,
selector: 'nav-bar',
templateUrl: 'nav-bar.component.html',
styleUrls: ['nav-bar.component.css'],
directives: [
MdToolbar,
MdButton,
MdIcon
],
providers: [
MdIconRegistry
]
})
export class NavBarComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
HTML File
<md-toolbar>
<button md-button>
<md-icon>menu</md-icon>
</button>
NavBar
</md-toolbar>
Try to import MdRippleModule in your AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule} from '#angular/http';
import { MdRippleModule } from '#angular2-material/core/core'; <== this line
#NgModule({
imports: [ BrowserModule, HttpModule, MdRippleModule ], <== add here
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Or pass MdRipple directive within your component:
...
import { MdRipple } from '#angular2-material/core/core'; <== this line
#Component({
moduleId: module.id,
selector: 'nav-bar',
templateUrl: 'nav-bar.component.html',
styleUrls: ['nav-bar.component.css'],
directives: [
MdToolbar,
MdButton,
MdIcon,
MdRipple <== add here
],
providers: [
MdIconRegistry
]
})
export class NavBarComponent implements OnInit {
...

Categories