Angular not building AOT production

[vamidi]

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]

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

[Ni55aN]

Wow, there are so many discusions and no solution

https://github.com/ng-packagr/ng-packagr/issues/892 https://github.com/ng-packagr/ng-packagr/issues/355 https://github.com/ng-packagr/ng-packagr/issues/594

[vamidi]

So this is something caused by the packager?

[Ni55aN]

I think yes

[vamidi]

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

[Ni55aN]

yes

[vamidi]

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

[Saabertooth]

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]

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

[vamidi]

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

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

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

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]

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