1

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

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

例外：未捕获（承诺中）：错误：./HomeComponent 类 HomeComponent 中的错误 - 内联模板：0:0 原因：yfiles 未定义
错误：./HomeComponent 类 HomeComponent 中的错误 - 内联模板：0:0 原因： yfiles 未定义

有问题的不是 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这是问题所在，如果是这样，我如何将它们导入项目？

4

1 回答 1

2

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

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

为了完成这项工作，还需要告知 webpack 可以在哪里找到模块 - 对于 webpack 2.x，可以使用以下resolve.modules配置指定webpack.config.js：

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" }
    ]
  }
};
于 2017-02-10T15:26:29.320 回答