Node.js 在没有NPM的情况下将库导入Angular2/WebPack项目

我对Angular2和WebPack完全陌生，正在为一些可能非常简单的事情而挣扎

我们正试图将其整合到Agular2/WebPack项目中。我在NPM上的

@types/yfiles

找到并导入了类型文件。库的其余部分只能从供应商处获得，不能在NPM上获得。这可以正确编译，但在调试项目时，控制台会报告错误：

异常：未捕获（承诺中）：错误：./HomeComponent类HomeComponent-内联模板中的错误：0:0原因：未定义yfiles
错误：./HomeComponent类HomeComponent-内联模板：0:0中出现错误，原因是：未定义文件

问题不在于HomeComponent，而在于它引用的DiagramComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'fs-diagram',
  templateUrl: './diagram.component.html',
  styleUrls: ['./diagram.component.scss']
})
export class DiagramComponent implements OnInit {
  private canvas: yfiles.view.CanvasComponent;

  constructor() {
    this.canvas = new yfiles.view.CanvasComponent();
  }

  ngOnInit() { }

}

文件夹结构如下所示：

> root
  > .vscode
  > node_modules
  ▼ src
    > app
    ▼ lib
      ▼ yfiles
        > impl
          *.js
        yfiles.css
    > public
    > style
      main.ts
      polyfill.ts
      vendor.ts
    npm-shrinkwrap.json
    package.json
    protractor.conf.js
    tsconfig.json
    tslint.json
    typedoc.json
    webpack.config.js

---

我感觉，即使存在

@types/yfiles/index.d.ts

文件，它也在运行时查找

*.js

文件。这就是问题所在吗？如果是，我如何将它们导入到项目中？

为了让webpack包含捆绑包中的yFiles模块，它们确实必须导入到您的Typescript文件中：

import yfiles = require("yfiles/view");

为了实现这一点，还需要告诉webpack在哪里可以找到模块-对于webpack 2.x，可以使用

webpack.config.js中的
resolve.modules
config来指定：

module.exports = {
  entry: "./src/index.ts",
  output: {
    filename: "dist/bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: ["./lib"] // the lib folder containing the yFiles modules
  },
  module: {
    loaders: [
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

你试过导入它吗？导入{Co…等，因为我看不到您在代码中引用yFile。那么您的代码如何知道从何处获取它（npm会自动为您执行此操作）您是否也尝试与供应商联系和/或阅读他们的文档？尝试添加仅添加
import../lib/yfiles
，因为它似乎是一个全局文件。您肯定也必须导入yfiles模块。TypeScript定义文件的存在只是为了向TypeScript编译器提供类型，它不包含任何实际的implementation.我对Angular和TS的了解还不够，无法回答如何导入模块，但我们在
demos/toolkit/angular2
中有一个Angular 2演示。也许你可以先看一下。谢谢！这让我找到了缺失的部分。我不得不使用
模块：['./node\u模块'，'./lib']
最终。请注意，使用yFiles for HTML 2.1，这一切都变得容易多了。现在，该软件包中有一个专用的angular cli演示程序，它使用了yFiles的本机ES6模块变体。