Skip to content
This repository has been archived by the owner on Jul 8, 2023. It is now read-only.

Angular not building AOT production #17

Open
vamidi opened this issue Oct 6, 2019 · 14 comments
Open

Angular not building AOT production #17

vamidi opened this issue Oct 6, 2019 · 14 comments

Comments

@vamidi
Copy link

vamidi commented Oct 6, 2019

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.

ERROR in : Unexpected value 'ReteModule in ../node_modules/rete-angular-render-plugin/dist/module.d.ts' imported by the module 'GameDbModule in ../src/app/pa
ges/game-db/game-db.module.ts'. Please add a @NgModule annotation.
@NgModule({
	imports: [
		CommonModule,
		ReactiveFormsModule,

		// Third party
		ReteModule,

                //... Rest of the code
	],
	declarations: [
		// Rete
		ReteComponent,
		NumberComponent,
		MyNodeComponent,
	],
	entryComponents: [
		// Rete
		ReteComponent,
		NumberComponent,
		MyNodeComponent,
	],
})
export class GameDbModule {

	static forRoot(): ModuleWithProviders {
		return <ModuleWithProviders>{
			ngModule: GameDbModule,
			// providers: [
			// 	SmartTableService<>,
			// ],
		};
	}
}
@qualmon
Copy link

qualmon commented Oct 9, 2019

Also getting this. It's reproducible from the examples/Angular8 project.

@Ni55aN
Copy link
Member

Ni55aN commented Oct 9, 2019

Wow, there are so many discusions and no solution

ng-packagr/ng-packagr#892
ng-packagr/ng-packagr#355
ng-packagr/ng-packagr#594

@vamidi
Copy link
Author

vamidi commented Oct 9, 2019

So this is something caused by the packager?

@Ni55aN
Copy link
Member

Ni55aN commented Oct 9, 2019

I think yes

@vamidi
Copy link
Author

vamidi commented Oct 9, 2019

Do you have the same issue when you try building your own repository?

@Ni55aN
Copy link
Member

Ni55aN commented Oct 9, 2019

yes

@vamidi
Copy link
Author

vamidi commented Oct 14, 2019

ng build --prod --aot=false --build-optimizer=false is working, but yea not a great solution

@Saabertooth
Copy link

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.

@vamidi
Copy link
Author

vamidi commented Oct 14, 2019

Yesss that is indeed the case I read about that, Do you have more knowlegde on barrel files? @Saabertooth

@vamidi
Copy link
Author

vamidi commented Oct 23, 2019

@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?

@vamidi
Copy link
Author

vamidi commented Oct 28, 2019

@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.

@wastedabuser
Copy link

@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...

@atalantus
Copy link

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.

@vamidi
Copy link
Author

vamidi commented Dec 12, 2019

I have no solution yet myself. I still copied the whole thing over and work from there.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants