在没有NPM的情况下将库导入Angular2 / WebPack项目(Import library into Angular2/WebPack project without NPM)

我是Angular2和WebPack的新手，我正在努力解决一些非常简单的问题。

我们正在尝试将HTML的yFiles合并到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文件。这是问题，如果是，我该如何将它们导入项目？

I'm completely new to Angular2 and WebPack and am struggling with something probably very simple.

We're trying to incorporate yFiles for HTML into an Agular2/WebPack project. I've found and imported the types file on NPM at @types/yfiles. The rest of the library is only available from the vendor, not on NPM. This compiles correctly, but when I debug the project, the console reports the error:

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

It's not the HomeComponent so much as the DiagramComponent it references that's having the problem.

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() { } }

The folder structure looks like this:

> 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

I get the feeling that the even though the @types/yfiles/index.d.ts file is present, it's looking for the *.js files at run time. Is that the problem, and if so, how do I import them into the project?

最满意答案

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

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

为了使这个工作，还需要告诉webpack可以找到模块的位置 - 使用webpack 2.x，这可以使用webpack.config.js中的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" } ] } };

In order to have webpack include the yFiles modules in the bundle, they will indeed have to be imported in your Typescript file:

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

To make this work, webpack also needs to be told where the modules can be found - with webpack 2.x, this can be specified using the resolve.modules config in 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" } ] } };

更多推荐