Import library into Angular2/WebPack project without NPM

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