Including a 3rd party lib

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.

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)

[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);

[angular-automatic-lock-bot[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.}