Error after the latest angular and bootstrap updates

[abnersouza]

Hi, Im using the control for a long time, but this week i updated all my npm packages, the issue is after the updates I'm getting the following error trying to initialize the control.

auth-modal.component.html:5 ERROR TypeError: sp is not a constructor
at SignaturePad.ngAfterContentInit (signature-pad.js:21)
at callProviderLifecycles (core.js:12682)
at callElementProvidersLifecycles (core.js:12656)
at callLifecycleHooksChildrenFirst (core.js:12639)
at checkAndUpdateView (core.js:13789)
at callViewAction (core.js:14136)
at execComponentViewsAction (core.js:14068)
at checkAndUpdateView (core.js:13791)
at callWithDebugContext (core.js:15039)
at Object.debugCheckAndUpdateView [as checkAndUpdateView]

SignaturePad.prototype.ngAfterContentInit = function () { var sp = require('signature_pad')['default']; var canvas = this.elementRef.nativeElement.querySelector('canvas'); if (this.options['canvasHeight']) { canvas.height = this.options['canvasHeight']; } if (this.options['canvasWidth']) { canvas.width = this.options['canvasWidth']; } this.signaturePad = new sp(canvas, this.options); // line breaking this.signaturePad.onBegin = this.onBegin.bind(this); this.signaturePad.onEnd = this.onEnd.bind(this); };

Here is my code:

HTML inside the NgModal ignore the # is just to not render html here

<#div class="modal-header">

Sign

<#/div>

<#div class="modal-body sign-body">
<#signature-pad [options]="signaturePadOptions" style="cursor: default !important"></#signature-pad>
</#div>

<#div class="modal-footer">
<#button type="button" (click)="onCancelClicked($event)" class="btn">
Cancel
<#/button>
<#button type="button" (click)="onSaveClicked($event)" class="btn btn-primary">
Submit
<#/button>

TS File
`
export class AuthModalComponent implements AfterViewInit {
@input() penTickness: number;
@input() title: string;
@ViewChild(SignaturePad) signaturePad: SignaturePad;

signaturePadOptions: Object = {
'minWidth': 2,
'canvasWidth': 500,
'canvasHeight': 100
};

constructor(private activeModal: NgbActiveModal) { }

ngAfterViewInit() {
if (this.penTickness) {
this.signaturePad.set('minWidth', this.penTickness);
}
this.signaturePad.clear();
}

onSaveClicked() {
this.activeModal.close(this.signaturePad);
}

onCancelClicked() {
this.activeModal.dismiss(this.signaturePad);
}
}

`

Any idea how could i fix the issue?

Thanks

[abnersouza]

Issue happening with CLI 1.6.6 and bootstrap 4.0.0, i had to downgrade the bootstrap to 4.0.0-beta.2 to get it working again.

[lathonez]

@abnersouza this is usually solve by an npm cache clean / reinstall.