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?

did you try importing it? import { Co... etc cause nowhere do I see you referencing yfiles in your code. so how would your code know where to pick it up (npm does this automatically for you) — zerohero, Feb 10 '17 at 06:02
did you also try to contact the vendor and/or read the documentation they have? — zerohero, Feb 10 '17 at 06:02
Try adding just adding `import ../lib/yfiles` since it appears to be a global. — Aluan Haddad, Feb 10 '17 at 06:09
You definitely have to import the yFiles modules as well. The TypeScript definition file only exists to supply types to the TypeScript compiler, it doesn't contain any actual *implementation*. I don't really know enough about Angular and TS to really answer how to import modules, but we have an Angular 2 demo in `demos/toolkit/angular2`. Maybe you'll look at that one first. — Joey, Feb 10 '17 at 12:57

score 2 · Accepted Answer · answered Feb 10 '17 at 15:26

2

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

answered Feb 10 '17 at 15:26

mfk

331
3
4

Thanks! That pointed my to the missing piece. I had to use `modules: ['./node_modules', './lib']` ultimately. – Hand-E-Food Feb 12 '17 at 22:27
1

Note that with yFiles for HTML 2.1 this has all become a lot easier. There is now a dedicated angular-cli demo in the package that makes use of the native ES6 modules variant of yFiles. – Sebastian Mar 01 '18 at 08:47

Import library into Angular2/WebPack project without NPM

1 Answers1