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

我对Angular2和WebPack完全陌生，并且很可能非常简单。将库导入到没有NPM的Angular2/WebPack项目中

我们正在尝试将yFiles for HTML合并到Agular2/WebPack项目中。我找到并在NPM上导入了类型文件@types/yfiles。库的其余部分只能从供应商处获得，而不能在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文件。这是问题吗？如果是这样，我如何将它们导入到项目中？

来源

2017-02-10 Hand-E-Food

你尝试将其导入： - 可发现的WebPack 2.x中，这可以利用webpack.config.js的resolve.modules配置来指定？ import {Co ...等导致无处看到你在代码中引用yfiles。那么你的代码如何知道在哪里提取它（npm会自动为你做） – zerohero

你是否也尝试联系供应商和/或阅读他们拥有的文档？ – zerohero

尝试添加仅添加 'import ../ lib/yfiles'，因为它似乎是全局的。 –

为了拥有的WebPack包括被捆绑的yFiles模块，他们确实将在你的打字稿要导入的文件：

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

为了使这项工作，的WebPack也需要知道去哪里模块

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-10 15:26:29 mfk

谢谢！这指出我缺少的一块。我最终必须使用'modules：['./node_modules'，'./lib']'。 –

请注意，使用yFiles for HTML 2.1这一切变得更容易。现在该软件包中有一个专用的角度cli演示，它使用yFiles的原生ES6模块变体。 – Sebastian

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

回答

相关问题