Question

我对Angular2和WebPack完全陌生，并且正在努力解决可能非常简单的问题。

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

EXCEPTION：未捕获（在承诺中）：错误：./ 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个文件。这是问题，如果是，我该如何将它们导入项目？

Answer 1

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

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

1 个答案: