Import library into Angular2/WebPack project without NPM - node.js

Question

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?

Answer 1

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