Need help with angular implementation

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’;

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;
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();


ngOnInit() {

	// Show / Hide Menus
	.subscribe(showDimensions => this.showDimensions = showDimensions);

	.subscribe(showPattern => this.showPattern = showPattern);

	.subscribe(showLogo => this.showLogo = showLogo);

	.subscribe(showHeaders => this.showHeaders = showHeaders);

	.subscribe(showCost => this.showCost = showCost);

        .subscribe((design) => {
   = design;

loadScripts() {
    const externalScriptArray = [
    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';


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



Did you already have a look there?

If that doesn’t help, I will forward your issue to our developers.

Yes. There were a couple of issues. The first was that the shapediver code uses the “request” function and that is undefined. I declared a “request” variable at the top of my angular component and it is undefined.

The second issues seemed to be that the “ParametricViewer” command was being called before the shapediver code was fully loaded. I fixed this by changing the hook to ngAfterViewInit.