Angular-cli: Including a 3rd party lib

Created on 3 Jun 2016 · 11Comments · Source: angular/angular-cli

I have looked at a number of different issues (https://github.com/angular/angular-cli/issues/274, https://github.com/angular/angular-cli/issues/785, https://github.com/angular/angular-cli/issues/845) and the wiki page (https://github.com/angular/angular-cli/wiki/3rd-party-libs) and I still cannot get a simple JS file to work in my project.

I'm trying to use filesaver.js in my app. My

angular-cli-build.js

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'filesaver.js/FileSaver.js'
    ]
  });
};

my system-config.ts

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'filesaverjs': 'vendor/filesaver.js',
};

/** User packages configuration. */
const packages: any = {
  'filesaverjs': {defaultExtension: 'js', main: 'FileSaver'},
};

I installed the package with npm:

jeff@computer:~/dev/myProj$ ls  ./node_modules/filesaver.js/
demo  FileSaver.js  FileSaver.min.js  LICENSE.md  package.json  README.md

It shows up in my vendor folder:

jeff@BenSolo:~/dev/ang_proj/analystToolbox$ ls  ./dist/vendor/filesaver.js/
FileSaver.js  FileSaver.min.js

I try to use it in my component, and it Cannot find module filesaverjs:

// in file ./src/app/+my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';
import { PlatformDescriptionService } from '../platform-description.service';
import * as saver from 'filesaverjs'; // ERROR: Cannot find module 'filesaverjs'.

What am I missing?

Useful info:

OS?

Linux Ubuntu

Versions.

$ ng --version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.5
node: 5.10.1
os: linux x64

Repro steps.

run this:

ng testProj
cd ./testProj
npm install filesaver.js --save
make the changes outlined above to system-config.js and angular-cli-build.js
run ng build
edit ./src/app/test-proj.component.ts:

//add this line:
'filesaverjs': {defaultExtension: 'js', main: 'FileSaver'},
ng build or ng build:

jeff@BenSolo:~/dev/ang_proj/testProj$ ng serve
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /home/jeff/dev/ang_proj/testProj/tmp/broccoli_type_script_compiler-input_base_path-gJxDieIo.tmp/0/src/app/test-proj.component.ts (2, 28): Cannot find module 'filesaverjs'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
    at Angular2App._buildTree (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
    at new Angular2App (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/home/jeff/dev/ang_proj/testProj/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/home/jeff/dev/ang_proj/testProj/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

Source

jdell64

Most helpful comment

This is really just a typescript issue.

Just add the following to src/typings.d.ts

declare module 'filesaver' {
    var saveAs: any;
    export = saveAs;
}

and use

import filesaver = require('filesaver');

filesaver.saveAs(blob, filename);

JSMike on 3 Jun 2016

👍3

All 11 comments

I found something interesting... If I add a console line in the library I am able to print it on the screen when I do this in my main.ts file:

import 'filesaverjs';

How can I access this file in my components?

jdell64 on 3 Jun 2016

Have you tried:

/** User packages configuration. */
const packages: any = {
  'filesaverjs': {defaultExtension: 'js', main: 'FileSaver.js', format: 'cjs'},
};

and

import {SaveAs} from 'filesaverjs';

JSMike on 3 Jun 2016

Yes. Same error:

Error: Typescript found the following errors: Cannot find module 'filesaverjs'.

I created a repo if you want it:

https://github.com/jdell64/vigilant-goggles/tree/master

jdell64 on 3 Jun 2016

This is really just a typescript issue.

Just add the following to src/typings.d.ts

declare module 'filesaver' {
    var saveAs: any;
    export = saveAs;
}

and use

import filesaver = require('filesaver');

filesaver.saveAs(blob, filename);

JSMike on 3 Jun 2016

👍3

@jdell64 I sent your repo a PR with the required changes.

JSMike on 4 Jun 2016

Thank you so much!

It's tough picking all the different things up from 0. I really appreciate
it!

On Friday, June 3, 2016, Mike Cebrian [email protected] wrote:

@jdell64 https://github.com/jdell64 I sent your repo a PR with the
required changes.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/999#issuecomment-223730993,
or mute the thread
https://github.com/notifications/unsubscribe/AA0oYFVWG4-FeeN5sqPOIzCN-58i-Kchks5qIOIXgaJpZM4Ittq_
.

Richard J Tindell

Ps 102:18- "This will be written for the generation to come, That a people
yet to be created may praise the Lord."

jdell64 on 4 Jun 2016

fyi, also works as:

import * as filesaver from 'filesaver';

I took the initial example from: https://www.typescriptlang.org/docs/handbook/modules.html

JSMike on 4 Jun 2016

Thanks @JSMike for answering this issue. It seems to be done so I'll close it.

filipesilva on 4 Jun 2016

This only works after the typings fix, right Mike?

On Saturday, June 4, 2016, Mike Cebrian [email protected] wrote:

fyi, also works as:

import * as filesaver from 'filesaver';

I took the initial example from:
https://www.typescriptlang.org/docs/handbook/modules.html

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/999#issuecomment-223742532,
or mute the thread
https://github.com/notifications/unsubscribe/AA0oYJJf5Sm7ZMGLEGd-41rgfda8SduLks5qIS4kgaJpZM4Ittq_
.