Bibliothek in Angular2/WebPack-Projekt ohne NPM importieren

Question

Ich bin völlig neu in Angular2 und WebPack und kämpfe mit etwas wahrscheinlich sehr einfach.

Wir versuchen, yFiles for HTML in ein Agular2/WebPack-Projekt zu integrieren. Ich habe die Dateitypen auf NPM unter @types/yfiles gefunden und importiert. Der Rest der Bibliothek ist nur vom Hersteller und nicht von NPM verfügbar. Dies kompiliert richtig, aber wenn ich das Projekt debuggen, meldet die Konsole den Fehler:

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

Es ist nicht das HomeComponent so viel wie die DiagramComponent verweist darauf, dass hat das das 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() { } 

} 

Die Ordnerstruktur sieht wie folgt aus:

> 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 

ich das Gefühl, dass das, obwohl die @types/yfiles/index.d.ts-Datei vorhanden ist, wird es für die *.js Dateien zur Laufzeit suchen. Ist das das Problem, und wenn ja, wie importiere ich sie in das Projekt?

Answer 1

Um webpack zu haben, schließen die yFiles Module im Bündel, werden sie in der Tat in Ihrer Typoskript-Datei importiert werden müssen:

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

Um diese Arbeit zu machen, muss webpack auch, wo die Module erzählt werden gefunden werden kann - mit webpack 2.x, kann dies die resolve.modules config in webpack.config.js angegeben werden:

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