将库导入到没有NPM的Angular2 / WebPack项目中

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

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

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还需要被告知在哪里可以find模块 – 使用webpack 2.x，这可以使用webpack.config.js中的webpack.config.jsconfiguration来指定：

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