Closed Hayast closed 3 months ago
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
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
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
}
}
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