Comments (14)
@vamidi thanks for the hints, man. I did pretty much the same. I just copied the entire source code from https://github.com/retejs/angular-render-plugin/tree/master/src into my project and used that instead of the npm package. Kind of stupid though...
from examples.
Also getting this. It's reproducible from the examples/Angular8 project.
from examples.
Wow, there are so many discusions and no solution
ng-packagr/ng-packagr#892
ng-packagr/ng-packagr#355
ng-packagr/ng-packagr#594
from examples.
So this is something caused by the packager?
from examples.
I think yes
from examples.
Do you have the same issue when you try building your own repository?
from examples.
yes
from examples.
ng build --prod --aot=false --build-optimizer=false
is working, but yea not a great solution
from examples.
I also have this issue. From the other referenced issues, it seems to be an issue with the generated metadata.json
file and may be related to barrel (index.ts) files.
from examples.
Yesss that is indeed the case I read about that, Do you have more knowlegde on barrel files? @Saabertooth
from examples.
@Ni55aN I see in your ng-package.json file a search for schema. do I have install ng-packagr
?
Might that be the cause why it is not working?
Also is there no sulotion to temporary embed javascript in the component like jquery?
from examples.
@qualmon and @Saabertooth I made a workaround for this. make a rete.module file in your own project with the code below inside. Then include the file in your name.module.ts
that worked for me!
- NOTE - also if you create a component that overrides the nodecomponent don't forget to add
super.ngOnInit()
and create new template elements mine looks like this
ngx-rete-socket
- for the SocketComponent
ngxReteSocket
- for the socket directive
ngxReteControl
- for the control directive
ngxKebab
- for the kebab pipe
my case it is ngx because of tslint of the nebalar library you can create whatever you want.
CustomComponent
@Component({
template: ``,
})
export class CustomComponent implements OnInit, OnDestroy
{
@Input()
component: Type<Component>;
@Input()
props: Props;
constructor(
private vcr: ViewContainerRef,
private injector: Injector,
private factoryResolver: ComponentFactoryResolver)
{
}
ngOnInit(): void
{
const factory = this.factoryResolver.resolveComponentFactory(this.component);
const componentRef = factory.create(this.injector);
const props = this.props;
for (const key of Object.keys(props))
{
Object.defineProperty(componentRef.instance, key, {
get: function () { return props[key]; },
set: function (val) { props[key] = val; },
});
}
this.vcr.insert(componentRef.hostView);
}
ngOnDestroy(): void
{
this.vcr.detach(0);
}
}
SocketComponent
import { Socket, IO, Input as ReteInput } from 'rete';
import { Component, Input } from '@angular/core';
import { SocketType } from 'rete-angular-render-plugin';
@Component({
selector: 'ngx-rete-socket',
template: `<div
*ngIf="socket" class="socket" [ngClass]="[type, socket.name, extraClass]" [title]="socket.name"></div>`,
styles: [`
:host{display:inline-block}.socket{display:inline-block;cursor:pointer;border:1px solid #fff;border-radius:12px;width:24px;height:24px;margin:6px;vertical-align:middle;background:#96b38a;z-index:2;box-sizing:border-box}.socket:hover{border-width:4px}.socket.multiple{border-color:#ff0}
`],
})
export class SocketComponent
{
@Input()
socket: Socket;
@Input()
io: IO;
@Input()
extraClass: string;
readonly type: SocketType;
constructor()
{
Object.defineProperty(SocketComponent.prototype, 'type', {
get: () => this.io instanceof ReteInput ? 'input' : 'output',
enumerable: true,
configurable: true,
});
}
}
SocketDirective
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Input as ReteInput, IO } from 'rete';
import { NodeService, SocketType } from 'rete-angular-render-plugin';
@Directive({ selector: '[ngxReteSocket]'})
export class SocketDirective implements OnInit
{
@Input()
io: IO;
@Input()
extraClass: string;
readonly type: SocketType;
constructor(private el: ElementRef, private service: NodeService)
{
Object.defineProperty(SocketDirective.prototype, 'type', {
get: () => this.io instanceof ReteInput ? 'input' : 'output',
enumerable: true,
configurable: true,
});
}
ngOnInit(): void
{
this.service.bindSocket(this.el.nativeElement, this.type, this.io);
}
}
ControlDirective
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Control } from 'rete';
import { NodeService } from 'rete-angular-render-plugin';
@Directive({ selector: '[ngxReteControl]' })
export class ControlDirective implements OnInit
{
@Input('ngxReteControl')
control: Control;
constructor(private el: ElementRef, private service: NodeService) { }
ngOnInit(): void
{
this.service.bindControl(this.el.nativeElement, this.control);
}
}
KebabPipe
import { Pipe, PipeTransform } from '@angular/core';
declare type ClassAttr = string | string[];
@Pipe({ name: 'ngxKebab' })
export class KebabPipe implements PipeTransform
{
replace(s: string): string {
return s.toLowerCase().replace(/ /g, '-');
}
transform(value: ClassAttr): ClassAttr
{
return Array.isArray(value) ? value.map((s) => this.replace(s) ) : this.replace(value);
}
}
ReteModule
import { NgModule, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { createCustomElement } from '@angular/elements';
import { CustomComponent } from '@app-core/libraries/rete/custom.component';
@NgModule({
declarations: [
CustomComponent,
SocketComponent,
SocketDirective,
KebabPipe,
ControlDirective,
],
imports: [
CommonModule,
],
providers: [
KebabPipe,
ControlDirective,
],
exports: [
CustomComponent,
SocketComponent,
SocketDirective,
KebabPipe,
ControlDirective,
],
entryComponents: [
SocketComponent,
CustomComponent,
],
})
export class ReteModule
{
constructor(injector: Injector)
{
const CustomElement = createCustomElement(CustomComponent, { injector: injector });
if (!customElements.get('rete-element')) customElements.define('rete-element', CustomElement);
}
}
@Ni55aN maybe you know why this works and make this work for the next release? I don't think is has to do with barrel files you doing it right.
from examples.
So anyone made any progress figuring out how to resolve the error? Read through a lot of GitHub issues but their suggestions didn't seem to solve it either.
from examples.
I have no solution yet myself. I still copied the whole thing over and work from there.
from examples.
Related Issues (20)
- Change component/node color HOT 14
- Zoom with double click HOT 1
- Vuetify/Vue-Material
- Dragging all connected nodes HOT 3
- Vue3 example has errors in browser console and right click is not working.
- Vue3 example dependencies is outdated
- Removing Outputs Dinamically HOT 2
- Angular project not working in production HOT 1
- regeneratorRuntime is not defined HOT 2
- Remove "You are running Vue in development mode" in angular HOT 2
- problem in npm install project HOT 2
- Is there any example implemented with FeathersJS
- problem in angular material design HOT 2
- how to create node by button click HOT 1
- Flow diagram not shown HOT 9
- Tasks example alerts "NaN" if input box is modified
- problem on vue3 example (context menu not work) HOT 3
- Task example is outdated HOT 3
- Output Error at Angular example (trying with [email protected]) HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from examples.