CKEditor5-CKEditor-build issue - ckeditor5

I am using Ckeditor5 of latest version with Angular 13version and installed the CKEditor5 through npm and added the import in the app.modules.ts and in required component i have imported the Editor like this -
import * as ClassicEditorBuild from '#ckeditor/ckeditor5-build-classic';
But during running the application i am getting following issue even though i tried multiple ways like building with custom builds and predefined builds too...
./node_modules/#ckeditor/ckeditor5-build-classic/build/ckeditor.js - Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: C:\Users\2407s\node_modules\#ckeditor\ckeditor5-build-classic\build\ckeditor.js: Cannot read property 'node' of undefined
at plainFunction (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\helper-wrap-function\lib\index.js:69:17)
at wrapFunction (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\helper-wrap-function\lib\index.js:128:5)
at _default (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\helper-remap-async-to-generator\lib\index.js:47:35)
at PluginPass.Function (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\plugin-transform-async-to-generator\lib\index.js:53:50)
at newFn (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\visitors.js:177:21)
at NodePath._call (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\path\context.js:100:31)
at TraversalContext.visitQueue (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:103:16)
at TraversalContext.visitMultiple (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:72:17)
at TraversalContext.visit (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:129:19)
at traverseNode (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\traverse-node.js:24:17)
at NodePath.visit (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\path\context.js:107:52)
at TraversalContext.visitQueue (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:103:16)
at TraversalContext.visitSingle (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:77:19)
at TraversalContext.visit (C:\Users\2407s\OneDrive\Documents\combinedrepo\ui\node_modules\#babel\traverse\lib\context.js:131:19)
× Failed to compile.

Related

(plugin node-resolve) Error: Error running plugin hook resolveId for node-resolve, expected a function hook

Following 14.0.0 version upgrade for "#rollup/plugin-node-resolve" plugin, when running my build I always get this error message :
[!] (plugin node-resolve) Error: Error running plugin hook resolveId for node-resolve, expected a function hook.
Error: Error running plugin hook resolveId for node-resolve, expected a function hook.
at error (/Users/***/Documents/GitHub/poke/node_modules/rollup/dist/shared/rollup.js:198:30)
at throwInvalidHookError (/Users/***/Documents/GitHub/poke/node_modules/rollup/dist/shared/rollup.js:22635:12)
at /Users/***/Documents/GitHub/poke/node_modules/rollup/dist/shared/rollup.js:22776:24
Was there any breaking change that I should be aware ?

could not connect to development server react native android studio

I reinstall node modules again and this error appears
Error: Forward-slash in opening tag not followed by >Line: 9Column: 42Char: / at error (F:\project\node_modules\sax\lib\sax.js:651:10) at strictFail (F:\project\node_modules\sax\lib\sax.js:677:7) at SAXParser.write (F:\project\node_modules\sax\lib\sax.js:1295:13) at new XmlDocument (F:\project\node_modules\xmldoc\lib\xmldoc.js:261:15) at readManifest (F:\project\node_modules\#react-native-community\cli-platform-android\build\config\readManifest.js:38:10) at Object.projectConfig (F:\project\node_modules\#react-native-community\cli-platform-android\build\config\index.js:70:46) at Object.get project [as project] (F:\project\node_modules\react-native\node_modules\#react-native-community\cli\build\tools\config\index.js:106:50) at filterConfig (F:\project\node_modules\react-native\node_modules\#react-native-community\cli\build\commands\config\config.js:13:20) at Object.func (F:\project\node_modules\react-native\node_modules\#react-native-community\cli\build\commands\config\config.js:27:32) at Command.handleAction (F:\project\node_modules\react-native\node_modules\#react-native-community\cli\build\index.js:186:23)
There's a syntax error in your AndroidManifest.xml.

Import fritzapi (node package) into Ionic project

I am currently trying to use this API in my Ionic project, but man, I have no clue on how to do it. I tried figuring it out using things like this, but I always get errors on ionic server:
101 unchanged chunks
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 3.07 MB [rendered]
[ng]
[ng] ERROR in ./node_modules/request/lib/har.js
[ng] Module not found: Error: Can't resolve 'fs' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\request\lib'
[ng] ERROR in ./node_modules/forever-agent/index.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\forever-agent'
[ng] ERROR in ./node_modules/tough-cookie/lib/cookie.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tough-cookie\lib'
[ng] ERROR in ./node_modules/tunnel-agent/index.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tunnel-agent'
[ng] ERROR in ./node_modules/forever-agent/index.js
[ng] Module not found: Error: Can't resolve 'tls' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\forever-agent'
[ng] ERROR in ./node_modules/tunnel-agent/index.js
[ng] Module not found: Error: Can't resolve 'tls' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tunnel-agent'
[ng] Time: 2321ms
[ng] i 「wdm」: Failed to compile.
I'm super new to webdev and Ionic in general, so I don't know if this is even possible, but I feel like it should be. Above error is a result of the following code:
import { Component } from '#angular/core';
import * as fritzapi from 'fritzapi';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {
fritzapi.getSessionID("removedforstack", "removedforstack").then(function(sid) {
console.log(sid);
});
}
}
Thanks in advance to everyone who's trying to help <3
I suspect this isn't possible. I think that you are trying to use something that's expected to be run on the local network in a node environment.
I did a search and found this article:
https://www.amadousall.com/angular-cli-module-not-found-error-cant-resolve/
Which say they used to do this:
supply an empty module when fs, crypto, tls and net were requested.
Which doesn't make sense really out of context but I couldn't find a simple bit to quote, take a look at the article.
Ultimately the angular team says:
Browser code should not rely on things that are not available in browser environments.
I'm assuming that the library needs to use these things to connect to the local network and interact with your home automation.
If i'm wrong then the article does have a way to supply an empty file instead of those modules, so if the code has alternate modes then it could work, but it doesn't seem likely to me off the top of my head.

Template parse errors - leafletOptions

I'm trying to follow the example and getting the following error:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'leafletOptions' since it isn't a known property of 'div'. ("
<div class="map"
leaflet
[ERROR ->][leafletOptions]="options">
</div>
This is my environment:
Angular CLI: 1.6.5
Node: 6.9.1
OS: linux x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cdk: 5.1.0
#angular/cli: 1.6.5
#angular/flex-layout: 2.0.0-beta.12
#angular/material: 5.1.0
#angular-devkit/build-optimizer: 0.0.41
#angular-devkit/core: 0.0.28
#angular-devkit/schematics: 0.0.51
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.5
#schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0
I'm assuming this has to be something simple, but this is my first time working with a recent version of angular.
So I found a solution.
I'm trying to create a separate module for my map and needed to add
import { LeafletModule } from '#asymmetrik/ngx-leaflet';
to my map module instead of to my app.component.ts. Hopefully this helps someone out in the future.

Getting Failed to load %5Bobject%20Object%5D on Webpack generated js hosted in express due to stylus styles

I am working on augmenting the example found here. So first of all it works great if I call npm start. Now I wanted to try and get it to work with an existing ExpressJS project. To do this in a quick and dirty way I copy the three js files to the ./public/javascripts folder and create the following index.jade...
extends layout
block content
my-app Loading....
script(type="text/javascript", src="http://localhost:3000/javascripts/polyfills.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/vendor.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/app.js")
but now I get....
Error: Uncaught (in promise): Failed to load %5Bobject%20Object%5D
at resolvePromise (zone.js:538)
at PromiseCompleter.reject (zone.js:515)
at application_ref.js:349
at ZoneDelegate.invoke (zone.js:323)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:48)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:39)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.ZoneTask.cancelFn.invoke (zone.js:426)
zone.js:461 Unhandled Promise rejection: Failed to load %5Bobject%20Object%5D ; Zone: angular ; Task: Promise.then ; Value: Failed to load %5Bobject%20Object%5DconsoleError # zone.js:461_loop_1 # zone.js:490drainMicroTaskQueue #zone.js:494ZoneTask.ZoneTask.cancelFn.invoke # zone.js:426
Current project is available here
So for some reason this worked with the built in webpack server
styleUrls: [String(require('./navbar.component.styl'))]
This of course should be
styles: [String(require('./navbar.component.styl'))]