用Angular-cli加载第三方库

问题描述

这与此问题有关此处和这一个此处但这些都不符合我的需求.

This is related to this question here and this one here but neither of those fit my needs.

我正在将Angular2应用程序迁移到 angular-cli 结构，并且尝试包含 .OBJLoader &我迁移的项目中的 threejs 库的 .MTLLoader .

I'm migrating an Angular2 app over to the angular-cli structure and I'm trying to include the .OBJLoader & .MTLLoader for the threejs library in my migrated project.

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

I've included the scripts from the threejs node folder in my .angular-cli.json file like this:

      "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 & .MTLLoader 没有类型，我认为我必须在 typings.d.ts 文件中自己创建它们:

Because the .OBJLoader & .MTLLoader don't have typings I thought that I'd have to create them myself in the typings.d.ts file:

/* 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 {

}

然后我尝试将模块导入到我需要它们的服务中，如下所示:

I then tried to import the modules into the service I required them in like this:

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

这里有几个问题:

• 要使它正常工作，我需要更改什么?
• typesings文件夹是否检查 node_nodules 中的 @types 文件夹以获取声明的类型?
• 如何在Typescript中加载脚本并使其可用?

• What do I need to change to get this to work?
• Does the typings folder examine the @types folder in the node_nodules for declared types?
• How do scripts get loaded in and made available in typescript?

我对在这里做什么感到困惑.

I'm confused as to what to do here.

推荐答案

感谢@Joe Clay的帮助，但最终我找到了一个替代方法，允许我 require 我所需要的任何文件需要.我在 src 文件夹的根目录下编辑了 typings.d.ts 文件，并添加了以下内容:

Thanks to @Joe Clay for the help but I ended up going with an alternative to allow me to require whatever file/s I needed. I edited the typings.d.ts file at the root of the src folder and added this:

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

这使我在抓取 .MTLLoader 或 .OBJLoader 时可以使用以下内容:

This allowed me to use the following when grabbing the .MTLLoader or .OBJLoader:

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

这篇关于用Angular-cli加载第三方库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！