Can't run code correctly in angular v18.

[Hayast]

Angular CLI: 18.1.0

app.component.ts //======================================================================= import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { StlModelViewerModule } from 'angular-stl-model-viewer'; import * as THREE from 'three'; import { Vector3, MeshBasicMaterial, TextureLoader, Texture } from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, StlModelViewerModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'Examples'

renderer = new THREE.WebGLRenderer({ antialias: true }) camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15) controls = new OrbitControls(this.camera, this.renderer.domElement) scene = new THREE.Scene() light = new THREE.PointLight(0xffffff, 80)

constructor() { this.renderer.setPixelRatio(window.devicePixelRatio) this.renderer.shadowMap.enabled = true

// default camera position
this.camera.position.set(3, 3, 3)

// default light position
this.light.position.set(1, 1, 2)

// default scene background
this.scene.background = new THREE.Color(0xffffff)

this.controls.enableZoom = true
this.controls.minDistance = 1
this.controls.maxDistance = 7

this.controls.update()

}

}

app.component.html

<stl-model-viewer [centered]="false" [stlModels]="['./assets/s1.stl']">

ERROR ReferenceError: document is not defined at createElementNS (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-BPSZOS2L.js:922:3) at createCanvasElement (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-BPSZOS2L.js:16294:18) at WebGLRenderer (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-BPSZOS2L.js:16301:16) at _AppComponent. (D:_temp\3d\src\app\app.component.ts:18:14) at _AppComponent (D:_temp\3d\src\app\app.component.ts:24:3) at NodeInjectorFactory.AppComponent_Factory (D:_temp\3d\src\app\app.component.ts:42:3) at getNodeInjectable (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:16472:38) at createRootComponent (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:23269:31) at ComponentFactory.create (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:23159:21) at _ApplicationRef.bootstrap (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:31624:38)

window is not defined at _StlModelViewerComponent (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\angular-stl-model-viewer.js:22908:45) at NodeInjectorFactory.StlModelViewerComponent_Factory (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\angular-stl-model-viewer.js:23043:10) at getNodeInjectable (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:16472:38) at instantiateAllDirectives (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:19920:23) at createDirectivesInstances (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:19519:3) at ɵɵelementStart (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:27137:5) at Module.ɵɵelement (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:27181:3) at AppComponent_Template (D:_temp\3d\src\app\app.component.html:2:1) at executeTemplate (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:19491:5) at renderView (D:_temp\3d.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:20265:7

[KillerCodeMonkey]

you are using server side rendering, so window and document are not rendered on server side. just make sure, that the component is only attached to the dom, if not on server side

[KillerCodeMonkey]

e.g. https://v17.angular.io/guide/ssr#authoring-server-compatible-components

or check if isPlatformBrowser returns true for the current platform. https://stackoverflow.com/questions/62270008/how-to-validate-if-is-a-browser-on-the-server-side-without-window-reference