Problem when I make the build

[facundoLecuna]

Hello! First I want to thank for the library, it's nice. I find an error when I make the build (ng build --prod):

Error: Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts'

• only instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ?null?, ...]
  Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts' - only
  instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, null, ?null?, ...]
  Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts' - only
  instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, null, null, ?null?]
  Can't resolve all parameters for ɵa in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: (?, [object Object], [object Object]).
  Can't resolve all parameters for ɵg in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: (?, [object Object]).
  Can't resolve all parameters for ɵi in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: ([object Object], ?, [object Object]).
  Can't resolve all parameters for ɵn in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: ([object Object], ?, [object Object]).
  Can't resolve all parameters for VerVentaComponent in C:/Users/ARX0001161/Documents/MetamorfosisAngular/src/app/ventas/pages/ver-venta/ver-venta.component.ts: (?, [object Object]).

I'm using Angular 11, what could be the problem? I'm new in angular, but I followed the "Get Started" correctly and in development the library works fine, the problem is only in the build.

Thanks!

[boris-jenicek]

I will take a look, can you please paste your code from app.module and the component that part where you using it.

[facundoLecuna]

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule } from '@modules/auth/auth.module';
import { IconsModule } from '@modules/icons/icons.module';
import { NavigationModule } from '@modules/navigation/navigation.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { ReactiveFormsModule } from '@angular/forms';
import { ToastrModule } from 'ngx-toastr';
import { SharedModule } from './shared/shared.module';
import { MarcasModule } from './marcas/marcas.module';
import { NgxAwesomePopupModule, DialogConfigModule, ConfirmBoxConfigModule} from '@costlydeveloper/ngx-awesome-popup';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { HttpErrorInterceptor } from './shared/HttpErrorInterceptor.interceptor';
import { MatDialogRef } from '@angular/material/dialog';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule, 
        AppRoutingModule, 
        HttpClientModule, 
        NavigationModule, 
        IconsModule, 
        AuthModule, 
        BrowserAnimationsModule,
        MaterialModule, 
        ReactiveFormsModule, 
        ToastrModule.forRoot(), 
        SharedModule, MarcasModule,
        NgxAwesomePopupModule.forRoot(), 
        ConfirmBoxConfigModule.forRoot(),
        DialogConfigModule.forRoot() 
    ],
    exports: [],
    providers: [
        { provide: MAT_DATE_LOCALE, useValue: 'es-ES' },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpErrorInterceptor,
            multi: true,
        },
        {
            provide: MatDialogRef,
            useValue: {}
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

ver-venta.component.ts:

import { Component, OnInit } from '@angular/core';
import { Venta } from '@app/shared/interfaces/venta.interface';
import { DialogBelonging } from '@costlydeveloper/ngx-awesome-popup';
import { Subscription } from 'rxjs';
import { VentasService } from '../../services/ventas.service';

@Component({
    selector: 'sb-ver-venta',
    templateUrl: './ver-venta.component.html',
    styleUrls: ['./ver-venta.component.scss']
})
export class VerVentaComponent implements OnInit {

    private subscriptions: Subscription = new Subscription();
    venta!: Venta;

    constructor(private dialogBelonging: DialogBelonging, private ventaService: VentasService) { }

    ngOnInit(): void {
        let venta = this.dialogBelonging.CustomData['ventaId'];
        this.ventaService.GetVentaById(venta).subscribe(venta => {
            this.venta = venta;
            this.dialogBelonging.EventsController.closeLoader();
        })        

        // Subscribe to button listeners.
        this.subscriptions.add(
            // IDialogEventsController
            this.dialogBelonging.EventsController.onButtonClick$.subscribe(
                _Button => {
                    if (_Button.ID === 'submit') {
                        // Do some logic and close popup.
                        this.dialogBelonging.EventsController.close();
                    } 
                }
            )
        );        
    }

    ngOnDestroy(): void {
        this.subscriptions.unsubscribe();
    }
}

Component part where I set the dialogPopup :

VerVenta(venta: VentaListadoDto) {
        
        // Instance of DialogInitializer includes any valid angular component as argument.
        const dialogPopup = new DialogInitializer(VerVentaComponent);
        // Any data can be sent to AnyAngularComponent.
        dialogPopup.setCustomData({ventaId: venta.id}); 
        
        // Set some configuration.
        dialogPopup.setConfig({
            Width     : '800px',
            LoaderComponent: DialogLoaderComponent,
            LayoutType: DialogLayoutDisplay.NONE // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        
        // Set some custom buttons as list.
        // SUCCESS | INFO | NONE | DANGER | WARNING | PRIMARY | SECONDARY | LINK | DARK | LIGHT
        dialogPopup.setButtons([
            new ButtonMaker('Cerrar', 'submit', ButtonLayoutDisplay.SUCCESS),
        ]);
    
        // Simply open the popup and observe which button is clicked and, 
        // receive optional payload from AnyAngularComponent.
        dialogPopup.openDialog$().subscribe(resp => {
            console.log('dialog response: ', resp);
        });
    }

NOTE: If I remove the dependency injection (DialogBelonging) in ver-venta.component.ts, it keeps showing me errors when I make the build to production:

Error: Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts'

• only instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ?null?, ...]
  Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts' - only
  instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, null, ?null?, ...]
  Invalid provider for the NgModule 'NgxAwesomePopupModule in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts' - only
  instances of Provider and Type are allowed, got: [ɵo in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵp in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵq in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵl in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵt in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵv in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, ɵr in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts, null, null, ?null?]
  Can't resolve all parameters for ɵa in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: (?, [object Object], [object Object]).
  Can't resolve all parameters for ɵg in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: (?, [object Object]).
  Can't resolve all parameters for ɵi in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: ([object Object], ?, [object Object]).
  Can't resolve all parameters for ɵn in C:/Users/ARX0001161/Documents/MetamorfosisAngular/node_modules/@costlydeveloper/ngx-awesome-popup/costlydeveloper-ngx-awesome-popup.d.ts: ([object Object], ?, [object Object]).

Thanks.

[boris-jenicek]

hmm....

interesting, everything looks fine trying to find typo or something strange in code and I trying to reproduce the same but no success for now, do you use latest version of library currently that is 1.1.0?

Is there any chance that you have that project public on git, so maybe I could try to reproduce the same environment and find out what went wrong there?

BTW:
This is not related to the error, but generally you can put interface or specify object structure in dialog belonging like this:

constructor(private dialogBelonging: DialogBelonging<{ventaId: number}>, private ventaService: VentasService) { }

then you can have code autocomplete and have this:
let venta = this.dialogBelonging.CustomData.ventaId;
instead of this:
let venta = this.dialogBelonging.CustomData['ventaId'];

[DimoYa]

Hello I am also having exactly the same problem when npm run build -- --prod is executed: ERROR in Invalid provider for the NgModule 'NgxAwesomePopupModule in .... - only instances of Provider and Type are allowed. You can take a look of the repo: https://github.com/DimoYa/AngularDotNetCorePoC

[boris-jenicek]

looking at this, I cloned your repo and tried different things, still, I didn't find the reason why that happened. I see that you use angular 8, which is before angular introduced the ivy compiler, I am not sure is that related, I thought to disable installation on angular 8, officially it is forangular 9+ but anyway it appears it isn't a reason, in this case, I updated your angular to angular 9 and there is still the problem still present.

Another thing I found is that you have the double call of DialogConfigModule in app.module.ts

I still looking at why it happened.

[facundoLecuna]

I've noticed that if a make only "ng build", it's work. So the problem is only when we use "--prod", apparently.

[DimoYa]

Yeah, but the automatic deploy triggers "--prod" ...

[facundoLecuna]

It doesn't work properly either, when I press the buton in a dialog throw a console error:

DialogWrapperComponent.html:103 ERROR TypeError: Cannot read properties of undefined (reading 'setClickedButtonID')
at DialogEventsController.onButtonClick (costlydeveloper-ngx-awesome-popup.js:1259)
at DialogWrapperComponent.onCustomButton (costlydeveloper-ngx-awesome-popup.js:1071)
at Object.eval [as handleEvent] (DialogWrapperComponent.html:106)
at handleEvent (core.js:31145)
at callWithDebugContext (core.js:32183)
at Object.debugHandleEvent [as handleEvent] (core.js:31950)
at dispatchEvent (core.js:23179)
at core.js:30350
at HTMLButtonElement. (platform-browser.js:569)
at ZoneDelegate.invokeTask (zone-evergreen.js:402)

[facundoLecuna]

and when I press escape key:
DialogWrapperComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read properties of undefined (reading 'setPayload')
at DialogEventsController.close (costlydeveloper-ngx-awesome-popup.js:1255)
at DialogWrapperComponent.close (costlydeveloper-ngx-awesome-popup.js:1057)
at DialogWrapperComponent.keyEvent (costlydeveloper-ngx-awesome-popup.js:1078)
at Object.eval [as handleEvent] (DialogWrapperComponent_Host.ngfactory.js? [sm]:1)
at handleEvent (core.js:31145)
at callWithDebugContext (core.js:32183)
at Object.debugHandleEvent [as handleEvent] (core.js:31950)
at dispatchEvent (core.js:23179)
at core.js:30350
at platform-browser.js:569

[DimoYa]

i don't see any relation between this and the error

[boris-jenicek]

and when I press escape key: DialogWrapperComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read properties of undefined (reading 'setPayload') at DialogEventsController.close (costlydeveloper-ngx-awesome-popup.js:1255) at DialogWrapperComponent.close (costlydeveloper-ngx-awesome-popup.js:1057) at DialogWrapperComponent.keyEvent (costlydeveloper-ngx-awesome-popup.js:1078) at Object.eval [as handleEvent] (DialogWrapperComponent_Host.ngfactory.js? [sm]:1) at handleEvent (core.js:31145) at callWithDebugContext (core.js:32183) at Object.debugHandleEvent [as handleEvent] (core.js:31950) at dispatchEvent (core.js:23179) at core.js:30350 at platform-browser.js:569

Can you please open a separate topic and explain in which case you got an error on the escape key.

[boris-jenicek]

It appears that the compiler in some cases has issues with namespaces, the library is coded with namespaces which is one nice and useful typescript feature. Unfortunately, I will try to recode it without namespaces and see if that will fix the bug.

[boris-jenicek]

I managed to build your app @DimoYa, I need to make a few more tests before deploy release. I think that will be the solution, bugfix for this issue related to this topic.

[DimoYa]

ok thanks i will wait then

[boris-jenicek]

Build issue should be fixed in release 2.0.0, notice there is one breaking change in the dynamic component constructor.

Make sure that you upgrade the package to the latest version.

Release 2.0.0