Including a 3rd party lib #999

jdell64 · 2016-06-03T16:53:16Z

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.

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)

The text was updated successfully, but these errors were encountered:

jdell64 · 2016-06-03T18:42:05Z

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 · 2016-06-03T19:20:21Z

Have you tried:

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

and

import {SaveAs} from 'filesaverjs';

jdell64 · 2016-06-03T19:23:54Z

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 · 2016-06-03T20:40:03Z

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 · 2016-06-04T02:25:17Z

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

jdell64 · 2016-06-04T04:33:56Z

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
#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 · 2016-06-04T07:49:47Z

fyi, also works as:

import * as filesaver from 'filesaver';

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

filipesilva · 2016-06-04T15:31:49Z

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

jdell64 · 2016-06-04T15:33:33Z

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
#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 · 2016-06-06T06:02:46Z

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

angular-automatic-lock-bot · 2019-09-05T22:40:42Z

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

JSMike mentioned this issue Jun 3, 2016

Including angular2-highchart 3rd party lib #1000

Closed

filipesilva closed this as completed Jun 4, 2016

omkadiri mentioned this issue May 18, 2017

Global style imported but not applied in @angular/cli version 1.0.3 #6360

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Including a 3rd party lib #999

Including a 3rd party lib #999

jdell64 commented Jun 3, 2016

jdell64 commented Jun 3, 2016

JSMike commented Jun 3, 2016

jdell64 commented Jun 3, 2016 •

edited

Loading

JSMike commented Jun 3, 2016 •

edited

Loading

JSMike commented Jun 4, 2016

jdell64 commented Jun 4, 2016

JSMike commented Jun 4, 2016

filipesilva commented Jun 4, 2016

jdell64 commented Jun 4, 2016

JSMike commented Jun 6, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

Including a 3rd party lib #999

Including a 3rd party lib #999

Comments

jdell64 commented Jun 3, 2016

Useful info:

OS?

Versions.

Repro steps.

jdell64 commented Jun 3, 2016

JSMike commented Jun 3, 2016

jdell64 commented Jun 3, 2016 • edited Loading

JSMike commented Jun 3, 2016 • edited Loading

JSMike commented Jun 4, 2016

jdell64 commented Jun 4, 2016

JSMike commented Jun 4, 2016

filipesilva commented Jun 4, 2016

jdell64 commented Jun 4, 2016

JSMike commented Jun 6, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

jdell64 commented Jun 3, 2016 •

edited

Loading

JSMike commented Jun 3, 2016 •

edited

Loading