error: Some CKEditor 5 modules are duplicated - plugins

I am working in a angular project and using plugin in my project and getting this error:
error: Some CKEditor 5 modules are duplicated. I imported the package #ckeditor/ckeditor5-alignment.
.html file -
<ckeditor #editor [editor]="editor" [config]="config"></ckeditor>
and .ts file
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
export class WelcomePageSettingComponent implements OnInit {
public editor = ClassicEditor;
public config = {
plugins: [Alignment],
toolbar: ['heading', '|', 'bold', 'italic', '|', 'alignment'] }; constructor() {
}
constructor() { }
ngOnInit() { }
}

I used ckeditor5-editor-classic instead of ckeditor5-build-classic and getting another error: Cannot read property 'getAttribute' of null.
.html file
<ckeditor [editor]="editor"></ckeditor>
.ts file
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import ClassicEditor from "#ckeditor/ckeditor5-editor-classic/src/classiceditor";
export class WelcomePageSettingComponent implements OnInit {
public editor = ClassicEditor;
constructor() { }
ngOnInit() {
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [Alignment],
toolbar: ['heading', '|', 'bold', '|', 'italic', '|', 'mediaEmbed', '|',
'alignment']
})
.then()
.catch();
}
}

Related

White Screen for Launch External App in Ionic 4

I have a page that would like to launch external app when a button is clicked and the function goToApp() should run.
Following is my code for on the ts file but everything on the page could be loaded until the point I added
import { AppLauncher, AppLauncherOptions } from '#ionic-native/app-launcher/ngx';
Which right after it the page doesn't load anymore. There is no error code returned. Any idea? Thanks in advance.
import { Component,OnInit,Input } from '#angular/core';
import { AppLauncher, AppLauncherOptions } from '#ionic-native/app-launcher/ngx';
import { ModalController, Platform } from '#ionic/angular';
import { DomSanitizer,SafeResourceUrl } from '#angular/platform-browser';
/*
Generated class for the Posts page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-fsfastcheck',
templateUrl: 'fsfastcheck.html',
styleUrls: ['fsfastcheck.scss'],
})
export class FSFastCheckPage implements OnInit {
#Input()
url: string = "https://eastchenconsultancy.com/feng-shui-fast-check/";
url2: string = "https://eastchenconsultancy.com/appointment-list/";
urlSafe: SafeResourceUrl;
urlSafe2: SafeResourceUrl;
mySegment: string = 'travelrequest';
constructor(
public modalView: ModalController,
public sanitizer: DomSanitizer,
private appLauncher: AppLauncher, private platform: Platform) { }
ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.urlSafe2= this.sanitizer.bypassSecurityTrustResourceUrl(this.url2);
}
close() {
this.modalView.dismiss();
}
goToApp() {
const options: AppLauncherOptions = { }
if(this.platform.is('ios')) {
options.packageName = 'com.apple.compass'
} else {
options.packageName = 'com.gn.android.compass'
}
this.appLauncher.canLaunch(options)
.then((canLaunch: boolean) => console.log('Compass is available'))
.catch((error: any) => console.error('Compass is not available'));
}
}
Have you followed the standard part which you need to do when adding new modules to your app:
https://ionicframework.com/docs/native/overview#angular
Basically, you need to inject the module into the app:
// app.module.ts
import { AppLauncher } from '#ionic-native/app-launcher/ngx';
...
#NgModule({
...
providers: [
...
AppLauncher
...
]
...
})
export class AppModule { }

Encountered undefined provider error while attempting to execute file-transfer in Ionic

I am trying to execute file transfer from a Flask server to an Ionic3 application. Basically, what I want to do is send a .vcf file from the server to the application to them be read and displayed in the application. The application does not need to store the file in any form of persistent memory.
When I try to do this, I get a ton of error. The one I am encountering right now is:
Encountered undefined provider! Usually this means you have circular dependencies (might be caused by using 'barrel' index.ts files.
I tried making a whole separate provider file for file-transfer but that just gave me other errors. Currently, my .ts file that is throwing the error is as follows:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Transfer, TransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
#IonicPage()
#Component({
selector: 'page-quiz',
templateUrl: 'quiz.html',
providers: [Transfer, TransferObject, File]
})
export class QuizPage {
storageDirectory: string = '';
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("b734cdc8-8ec1-4fde-b918-b6062b5099df");
}
ionViewDidLoad() {
console.log('ionViewDidLoad QuizPage');
}
vCardDownload(uuid) {
const fileTransfer: TransferObject = this.transfer.create();
const vCardLocation = 'http://xxxxxxx.xxx.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.applicationDirectory + uuid).then((entry) => {
console.log("file was downloaded", entry.toURL());
alertSuccess.present();
}, (error) => {
console.log("ERROR file was not downloaded");
});
}
}
Where am I going wrong here and how can I achieve file transfer? I think I am on the right track to getting it working -- I am pretty new to typescript and mobile development so I apologize in advance for any mistakes. Essentially I want to "capture the file within the application."
It turns out I had two errors. First, my import statements were wrong. Second, I didn't add certain imports to the providers listing in my app.module.ts file.
Here are my providers in app.module.ts:
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
... declarations, imports, etc. ...
providers: [
StatusBar,
SplashScreen,
File,
FileTransfer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Here is the sample code I used to download the .vcf file.
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
...
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("XXXXXX-XXXXX-XXXX-XXXX");
}
...
vCardDownload(uuid) {
console.log("Trying to download vCard!");
const fileTransfer: FileTransferObject = this.transfer.create();
const vCardLocation = 'http://XXXXXX.XXX.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.dataDirectory + 'file.vcf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
console.error(error);
});
}
Note that so far this only works for me on a mobile device.

Ionic ENOENT: no such file or director

I am using Ionic.
Cordova CLI: 6.4.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.10.0
Xcode version: Xcode 8.3.2 Build version 8E2002
I get the following error:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'
Error: Module build failed: Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'
When I try access the following page:
review/review.ts
...
import { RatingModel } from '../model/ratingModel';
#IonicPage()
#Component({
templateUrl: 'review.html'
})
export class ReviewPage {
...
model/ratingModel.ts
import { Injectable } from "#angular/core";
import { PersonModel } from './personModel';
import { JobModel } from './jobModel';
#Injectable()
export class RatingModel {
public id: number = null;
public job: JobModel = null;
public review: string = null;
public rating: number = null;
public reviewDate: number = null;
public time: string = null;
public person: PersonModel = null;
public anonymous: number = null;
}
This was working until I changed my pages to use lazy loading.
review/review.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReviewPage } from './review';
import { ControlMessagesModule } from '../validation/controlMessages.module';
import { RatingComponentUpdateableModule } from '../utils/rating/ratingComponentUpdateable.module';
#NgModule({
declarations: [ReviewPage],
imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule],
exports: [ReviewPage]
})
export class ReviewPageModule { }
UPDATE
I find the error occurs because of the following:
this.ratingModel = navParams.get('ratingModel');
if (!this.ratingModel) {
this.ratingModel = new RatingModel();
when I remove the new RatingModel() line, I don't get any errors.
How are you supposed to create a new RatingModel?
The problem here is you are making the model class an injectable.
#Injectable()
export class RatingModel {
You dont have to make a model class as injectable.
If you do need to do so, you will have to set it as a provider.
Or try to get an object from the explicit injector.
constructor(private injector: Injector) { }
//..
this.ratingModel = this.injector.get(RatingModel)

ReflectiveInjector throws InvalidProviderError

I am trying to inject 2 services into generic classes using ReflectiveInjector as seen in this SO
The first time I call ReflectiveInjector on DebugService it works completely fine, however if I then replace this with CourseService, I recieve the following InvalidProviderError:
Uncaught InvalidProviderError_nativeError: Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined
This is the generic class where I am trying to inject the services.
Media.ts
////////////////////////////////////////////////////////////////////////////////////////
import { ReflectiveInjector } from '#angular/core';
// other imports
////////////////////////////////////////////////////////////////////////////////////////
import { CourseService , DebugService } from 'app/services';
//other imports
////////////////////////////////////////////////////////////////////////////////////////
export class Media {
private sanitizer: DomSanitizer;
private courseService: CourseService;
private debug: DebugService;
constructor(_audio: File[], _images: File[], _videos: File[] ) {
// works fine
var injector = ReflectiveInjector.resolveAndCreate([DebugService]);
this.debug = injector.get(DebugService);
// throws InvalidProviderError
var injector2 = ReflectiveInjector.resolveAndCreate([CourseService]);
this.courseService = injector2.get(CourseService);
}
The 2 services are as follows:
debug.service.ts
////////////////////////////////////////////////////////////////////////////////////////
import { Injectable } from '#angular/core';
////////////////////////////////////////////////////////////////////////////////////////
import { environment } from '../../environments/environment';
////////////////////////////////////////////////////////////////////////////////////////
#Injectable()
export class DebugService {
constructor() {
/*stuff*/
}
}
course-service.service.ts
////////////////////////////////////////////////////////////////////////////////////////
import { Injectable, EventEmitter, Output } from '#angular/core';
import { Router } from '#angular/router';
import { Title, DomSanitizer, SafeResourceUrl, SafeUrl} from '#angular/platform-browser';
////////////////////////////////////////////////////////////////////////////////////////
import { DebugService } from 'app/services';
////////////////////////////////////////////////////////////////////////////////////////
#Injectable()
export class CourseService {
#Output() preloadData = new EventEmitter<any>();
// Constructor 1 - called on instantiation of class
constructor(
private sanitizer: DomSanitizer,
private router: Router,
private titleService: Title,
private debug: DebugService
) { /*stuff*/ }
These services were successfully being used in the Media class prior, when I was manually passing CourseService and DebugService as params to the Media constructor, however wanted to get away from this as it seemed very 'clunky' compared to this more streamlined approach.
i.e.
export class Media {
/*stuff*/
constructor(_audio: File[], _images: File[], _videos: File[], _courseService: CourseService, _debugService: DebugService ) { /*stuff*/ }
}
Media is currently defined within another class's constructor:
var preloader = new Preloader(
new Media(
// Audio Files
[
new File(0, './app/assets/video/Example1.mp3')
],
// Image Files
[
],
// Video Files
[
new File(0, './app/assets/video/Example1.mp4')
]
)
//...

Fire Nativescript tabitem event when tabitem gets selected

I am using a Nativescript (Angular 2) TabView with two TabItems. The XML is divided intro three files. One that holds the TabView and two others for each TabItem. Therefore I also have three TypeScript components.
At the moment I am loading data in the second TabItem's onInit method. The problem is that this action already happens when the first TabItem of the TabView is being displayed/loaded.
What is the best practice to load this data only when the second TabItem is selected?
This is my (shortened) code:
home.page.html:
<ActionBar title="Home"></ActionBar>
<TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)" toggleNavButton>
<StackLayout *tabItem="{title: 'Tab 1'}">
<tab1></tab1>
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 2'}">
<tab2></tab2>
</StackLayout>
</TabView>
home.page.ts:
import {Component} from "#angular/core";
#Component({
selector: "home-page",
templateUrl: "./pages/home/home.page.html",
providers: []
})
export class HomePage {
public activeTab: string;
public constructor() {
}
public tabIndexChanged(e: any) {
switch (e.newIndex) {
case 0:
console.log(`Selected tab index: ${e.newIndex}`);
break;
case 1:
console.log(`Selected tab index: ${e.newIndex}`);
break;
default:
break;
}
}
}
tab1.tab.html:
<StackLayout orientation="vertical" class="p-20">
<Label text="Tab 1"></Label>
</StackLayout>
tab1.tab.ts:
import { Component, OnInit } from "#angular/core";
#Component({
selector: "tab1",
templateUrl: "./pages/partials/tab1.tab.html",
providers: []
})
export class Tab1 implements OnInit {
public constructor() {}
public ngOnInit() {
console.log("init Tab 1");
}
}
tab2.tab.html:
<StackLayout orientation="vertical" class="p-20">
<Label text="Tab 2"></Label>
</StackLayout>
tab2.tab.ts:
import { Component, OnInit } from "#angular/core";
#Component({
selector: "tab2",
templateUrl: "./pages/partials/tab2.tab.html",
providers: []
})
export class Tab2 implements OnInit {
public constructor() {}
public ngOnInit() {
console.log("init Tab 2");
this.getSomeDataViaHttp();
}
private getSomeDataViaHttp() {
//getting data from an API
}
}
Is there an Angular 2 / Nativescript event other than onInit that would help here?
Or should I use the method tabIndexChanged in the home.page.ts for that?
Or put all the logic and the XML for the TabView back into one xml file and one ts file?
What is best practice?
You could use a service and a Subject as followed.
Import the service file in all ts files (use the name and location you like):
import { NavService } from "./services/nav.service";
Make sure to import it also in your app.module.ts to generally load it:
import { NavService } from "./services/nav.service";
#NgModule({
declarations: [
AppComponent,
],
bootstrap: [AppComponent],
imports: [
],
providers: [
NavService
]
})
export class AppModule {}
Create the service file in the specified location with the following content:
import { Injectable } from "#angular/core";
import { Subject } from "rxjs";
#Injectable()
export class NavService {
private currentState = new Subject<any>();
constructor () {
}
setCurrentState(navPoint: number){
this.currentState.next(navPoint);
}
getCurrentState() {
return this.currentState.asObservable();
}
}
Change the tab2.tab.ts to the following:
import { Component, OnInit } from "#angular/core";
import { NavService } from "./services/nav.service";
#Component({
selector: "tab2",
templateUrl: "./pages/partials/tab2.tab.html",
providers: []
})
export class Tab2 implements OnInit {
public constructor(private _navService: NavService) {}
public ngOnInit() {
console.log("init Tab 2");
this._navService.getCurrentState().subscribe(
(state) => {
if (state == {{something}}) {
//write your code here which should be executed when state has the property {{something}}
this.getSomeDataViaHttp();
}
}
);
}
private getSomeDataViaHttp() {
//getting data from an API
}
}
Call the setCurrentState of the service in your home.page.ts:
import {Component} from "#angular/core";
import { NavService } from "./services/nav.service";
#Component({
selector: "home-page",
templateUrl: "./pages/home/home.page.html",
providers: []
})
export class HomePage {
public activeTab: string;
public constructor(private _navService: NavService) {
}
public tabIndexChanged(e: any) {
this._navService.setCurrentState(e.newIndex);
}
}
Take care that the "typeof" setting and getting the state is correct.