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

Question

我是 Angular2 和 WebPack 的新手，正在为一些可能非常简单的事情而苦苦挣扎。

我们正在尝试将 yFiles for HTML 合并到 Agular2/WebPack 项目中。我在 @types/yfiles 的 NPM 上找到并导入了类型文件。库的其余部分只能从供应商处获得，不能在 NPM 上获得。这样编译是正确的，但是当我调试项目的时候，控制台报错：

EXCEPTION: Uncaught (in promise): Error: Error in ./HomeComponent class HomeComponent - inline template:0:0 caused by: yfiles is not defined
Error: Error in ./HomeComponent class HomeComponent - inline template:0:0 caused by: yfiles is not defined

与其说是 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 文件。这是问题所在吗？如果是，我该如何将它们导入到项目中？

Answer 1

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

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

为了使这个工作，webpack 还需要被告知在哪里可以找到模块 - 使用 webpack 2.x，这可以使用 webpack.config.js 中的 resolve.modules 配置指定：

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" }
    ]
  }
};

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

Import library into Angular2/WebPack project without NPM

node.js

angular

webpack

yfiles