-
Notifications
You must be signed in to change notification settings - Fork 20
Angular not building AOT production #17
Comments
Also getting this. It's reproducible from the examples/Angular8 project. |
Wow, there are so many discusions and no solution ng-packagr/ng-packagr#892 |
So this is something caused by the packager? |
I think yes |
Do you have the same issue when you try building your own repository? |
yes |
|
I also have this issue. From the other referenced issues, it seems to be an issue with the generated |
Yesss that is indeed the case I read about that, Do you have more knowlegde on barrel files? @Saabertooth |
@Ni55aN I see in your ng-package.json file a search for schema. do I have install Also is there no sulotion to temporary embed javascript in the component like jquery? |
@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
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. |
@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... |
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. |
I have no solution yet myself. I still copied the whole thing over and work from there. |
Hi,
When I run npm start everything runs fine in the development phase, but when I run npm run build:prod it gives me this error.
The text was updated successfully, but these errors were encountered: