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

```javascript @Component({ template: ``, }) export class CustomComponent implements OnInit, OnDestroy { @Input() component: Type; @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

```javascript 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: `

`, 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

```javascript 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

```javascript 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

```javascript 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

```javascript 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.