Including a 3rd party lib

[jdell64]

I have looked at a number of different issues (#274, #785, #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.

1. run this:

   ng testProj
   cd ./testProj
   npm install filesaver.js --save

2. make the changes outlined above to system-config.js and angular-cli-build.js

3. run ng build

4. edit ./src/app/test-proj.component.ts:

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

5. 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)

[jdell64]

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?

[JSMike]

Have you tried:

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

and

import {SaveAs} from 'filesaverjs';

[jdell64]

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

[JSMike]

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]

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

[jdell64]

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 notifications@github.com 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
#999 (comment),
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."

[JSMike]

fyi, also works as:

import * as filesaver from 'filesaver';

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

[filipesilva]

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

[jdell64]

This only works after the typings fix, right Mike?

On Saturday, June 4, 2016, Mike Cebrian notifications@github.com 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
#999 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AA0oYJJf5Sm7ZMGLEGd-41rgfda8SduLks5qIS4kgaJpZM4Ittq_
.

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."

[JSMike]

@jdell64 yes, either way, after you add the typings.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}