Question

这与此问题here和此问题here有关，但这些都不符合我的需求。

我正在将Angular2应用迁移到angular-cli结构，我正在尝试包含.OBJLoader＆amp;我迁移项目中.MTLLoader库的threejs。

我已将threejs节点文件夹中的脚本包含在我的.angular-cli.json文件中，如下所示：

      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/three/examples/js/loaders/OBJLoader.js",
        "../node_modules/three/examples/js/loaders/MTLLoader.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }

因为.OBJLoader＆amp; .MTLLoader没有打字我认为我必须自己在typings.d.ts文件中创建它们：

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
  id: string;
}

// OBJLoader
declare var objloader: OBJLoader;
interface OBJLoader {

}

// MTLLoader
declare var mtlloader: MTLLoader;
interface MTLLoader {

}

然后我尝试将模块导入到我需要的服务中：

import { Injectable } from '@angular/core';

import * as THREE from 'three';
import * as OBJLoader from 'OBJLoader';
import * as MTLLoader from 'MTLLoader';

@Injectable()
export class LoaderService {

    constructor() {}

    setupMTLLoader(appPath) {
        var mtlLoader = new MTLLoader(); 
        return mtlLoader;
    }

    setupObjLoader(materials, appPath) {
        var objLoader = new OBJLoader();
        return objLoader;
    }
}

但angular-cli抱怨说：

Module not found: Error: Can't resolve 'OBJLoader' in '/my-path/src/app/shared/services'
 @ ./src/app/shared/services/loader.service.ts 12:0-39

这里有几个问题：

我需要更改什么才能让它发挥作用？
typings文件夹是否检查@types中node_nodules文件夹的声明类型？
脚本如何加载并在打字稿中提供？

我很担心这里要做什么。

Answer 1

CLI配置文件的scripts部分与import和export无关 - 它只是将脚本添加为HTML中的标记。如果您要从node_modules内导入不是主要导出内容的内容，您可以执行以下操作：

// Your typings would need to match!
import * as OBJLoader from "three/examples/js/loaders/OBJLoader";

但是，如果您尝试这样做，那么您将面临一个更棘手的问题：OBJLoader或MTLLoader都不是JavaScript / TypeScript模块。他们不会导出任何内容，而只是将内容附加到全局THREE变量中 - 因为您导入THREE，所以不存在！

通过添加输入法，您可以有效地说＆＃34;当我编译代码时，这些模块将存在＆＃34;，但它并没有改变实际文件不存在的现实。 t匹配到此。

您可以尝试do some Webpack trickery to make things hook in properly，但这需要弹出您的CLI配置并自行使用Webpack ......

老实说，我认为这里最好的选择就是将代码复制到项目中。从包的示例中直接导入代码似乎可能最终变得非常脆弱。

Answer 2

感谢@Joe Clay的帮助，但我最后选择了另一种方法，允许我require我需要的任何文件。我在typings.d.ts文件夹的根目录编辑了src文件并添加了这个：

/* Allow the use of require in the code  */
declare var require : any;

这允许我在抓取.MTLLoader或.OBJLoader时使用以下内容：

var MTLLoader = require('three-mtl-loader');
var OBJLoader = require('three-obj-loader');

使用Angular-cli

2 个答案: