I have implemented shapediver in javascript and now I want to use it in an angular (9) application. I am having trouble getting this to work though and I am not sure where to start. Part of this is that I am not yet proficient enough with angular. I did find a couple of examples though and followed them, but still get the error that the SDVApp variable is not defined. Is is possible that this variable is not “scoped” properly and I am simply not accessing it correctly?
The process that I use is to import the shapediver and three.js files and then create a new model. The error that I get is …
ERROR TypeError: Cannot read property ‘ParametricViewer’ of undefined
My Component :
import { Component, OnDestroy, OnInit, AfterViewInit, ViewEncapsulation } from ‘@angular/core’;
import { FormControl, FormGroup } from ‘@angular/forms’;
import { Subject } from ‘rxjs’;
import { debounceTime, distinctUntilChanged, takeUntil } from ‘rxjs/operators’;
import { HttpClient } from ‘@angular/common/http’;
import { fuseAnimations } from ‘@fuse/animations’;
import { FuseSidebarService } from ‘@fuse/components/sidebar/sidebar.service’;
import { DesignStudioService } from ‘app/main/design-studio/design-studio.service’;
@Component({
selector: ‘app-design-studio’,
templateUrl: ‘./design-studio.component.html’,
styleUrls: [’./design-studio.component.scss’]
})
export class DesignStudioComponent implements OnInit {
require : any;
window : any;
SDVApp : any;
showDimensions : boolean;
showPattern : boolean;
showLogo : boolean;
showHeaders : boolean;
showCost : boolean;
designType : string = 'bench';
design: any;
shapediver:any;
step: number;
searchInput: any;
// Private
private _unsubscribeAll: Subject;
constructor(private _studio: DesignStudioService) {
// Set the defaults
this.searchInput = new FormControl('');
this.step = 0;
// Set the private defaults
this._unsubscribeAll = new Subject();
//this.loadScripts();
}
ngOnInit() {
// Show / Hide Menus
this._studio
.currentDim
.subscribe(showDimensions => this.showDimensions = showDimensions);
this._studio
.currentPatt
.subscribe(showPattern => this.showPattern = showPattern);
this._studio
.currentLogo
.subscribe(showLogo => this.showLogo = showLogo);
this._studio
.currentHead
.subscribe(showHeaders => this.showHeaders = showHeaders);
this._studio
.currentCost
.subscribe(showCost => this.showCost = showCost);
this._studio.onDesignChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((design) => {
this.design = design;
});
}
loadScripts() {
const externalScriptArray = [
'src/assets/js/shapediver.js',
'src/assets/js/three.js'
];
for (let i = 0; i < externalScriptArray.length; i++) {
const scriptTag = document.createElement('script');
scriptTag.src = externalScriptArray[i];
scriptTag.type = 'text/javascript';
scriptTag.async = false;
scriptTag.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(scriptTag);
}
}
ngAfterViewInit() {
this.window = window;
// provide global access to the ShapeDiver Viewer API returned by the constructor
this.window.api = new this.SDVApp.ParametricViewer({
ticket: 'b377b948d7f72cee5db1184551e10c1e9f8a34cae0323283b7f5f8831cedc2e26986531436453d00bbce7556061713170f148b9d879fc7e6b2454fce26e030c1c8fb9782aeaaa1fa73ed74ce6059e6daba4a3b682e769ebfe82ee516dfc6b2a0fe3fc30c2fab53476e8f1f82c895f1781fa1746ebd15-b63fe0ed951441432130ea48fe327cf7',
modelViewUrl: 'eu-central-1', // or 'us-east-1' or address of your own ShapeDiver model view server
});
}
}