Can't run Three-DXF

Getting this error trying to run this in Angular, tried installing types but like other posts had no success.

 You may need an appropriate loader to handle this file type.
| 
| 		this.texture = source.texture.clone();
| 		this.texture.image = { ...this.texture.image }; // See #20328.
| 
| 		this.depthBuffer = source.depthBuffer;
 @ ./~/three-dxf-loader/dist/three-dxf-loader.js 16:82-98
 @ ./src/app/dxf-viewer/dxf-viewer.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts

Here’s the TS file I’m calling it in:

import { Component, OnInit } from '@angular/core';
// import * as THREE from 'three'
import { ThreeDxf } from 'three-dxf-loader'
import DxfParser from 'dxf-parser'

@Component({
  selector: 'app-dxf-viewer',
  templateUrl: './dxf-viewer.component.html',
  styleUrls: ['./dxf-viewer.component.css']
})
export class DxfViewerComponent implements OnInit {
  private file: Blob;
  public dxf;
  public cadCanvas;
  constructor() { }

  ngOnInit() {
  }

  public handleFileInput(fileInput) {
    this.file = fileInput.item(0) as Blob;
    console.log(this.file instanceof Blob);
    let fileReader = new FileReader();
    fileReader.onload = function(e) {
      const parser = new DxfParser();
      try {
        let dxf = parser.parseSync(e.target.result);
        return dxf
      } catch (err) {
        return console.error(err.stack);
      }
    }
    this.dxf = fileReader.readAsText(this.file);
  }

  public renderDxf() {
    // var font;
    // var loader = new THREE.FontLoader();
    // loader.load( 'fonts/helvetiker_regular.typeface.json', function ( response ) {
    //     font = response;
    // this.cadCanvas = new ThreeDxf.Viewer(this.dxf, document.getElementById('cad-view'), 1000, 800);
    // });
  this.cadCanvas = new ThreeDxf.Viewer(this.dxf, document.getElementById('cad-view'), 400, 400);

  }



}

Any tips on what I should do? Thanks!

[bzuillsmith]

I haven’t really tried with React or Angular yet. I know it’s possible, but I doubt it really fits into the react/angular component concepts with state and stuff. Typically in those frameworks you have a state that maps to some kind view. However, three.js is sort of it’s own control and there isn’t a great way to make it reactive to state. You’ll probably make some kind of simple component that uses dxf-parser to load all the data into a variable that is not watched by react (it’d probably slow react down to have it inspect such a large object) and then just load that into three-dxf.

I’m open to suggestions about how to re-architect to work better with these frameworks. I imagine that would be the focus of v2.0.0

[bzuillsmith]

Sorry, I thought this was more about TS definitions. I realize now you are using another lib, probably forked from this one called three-dxf-loader. I dunno what exactly that lib is doing different so I won’t be much help.