Angular-cli: Importing 3rd party libs

Created on 13 Jul 2016  路  17Comments  路  Source: angular/angular-cli

Hi, I want to import the https://github.com/bitpay/bitcore-wallet-client and I follow all the steps in your wiki here. And without success.

In angular-cli-build.js > vendorNpmFiles: 'bitcore-wallet-client/bitcore-wallet-client.js'
In system-config.ts :

const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  'bwc': 'vendor/bitcore-wallet-client/bitcore-wallet-client.js'
};

/** User packages configuration. */
const packages: any = {
  'bitcore-wallet-client':{
    format: 'cjs'
  }
};

In the component.ts : import * as bwc from 'bwc';

The file in vendor/bitcore-wallet-client/bitcore-wallet-client.js its available.

Trace error ng build : 

Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  */tmp/broccoli_type_script_compiler-input_base_path-s2P3oWr8.tmp/0/src/app/+create-wallet/create-wallet.component.ts (2, 22): Cannot find module 'bwc'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (*/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (*/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at */node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (*/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (*/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (*/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (*/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

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

macOS El Capitan
angular-cli: 1.0.0-beta.8
node: 4.4.4
os: darwin x64
RFC / discussion / question
Source
picture carlosfaria94

Most helpful comment

I think typings is optional in some cases. Here is an example with steps on adding a third party library. https://github.com/daftster/d3angularcli

picture daftster on 18 Jul 2016
👍2

All 17 comments

Hi @carlosfaria94,
Could you include all your system-config.ts file?

Also, does this exists on your build: dist/vendor/bitcore-wallet-client/bitcore-wallet-client.js ?

lbertenasco picture lbertenasco on 13 Jul 2016 
/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  'bwc': 'vendor/bitcore-wallet-client/bitcore-wallet-client.js'
};

/** User packages configuration. */
const packages: any = {
  'bitcore-wallet-client':{
    format: 'cjs'
  }
};

const materialPkgs:string[] = [
  'core',
  'button',
  'grid-list',
  'input',
  'toolbar',
  'icon',
  'sidenav',
  'card',
  'list',
  'radio',
  'checkbox'
];

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`};
});

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/hero-detail',
  'app/send-money',
  'app/request-money',
  'app/activity',
  'app/shared/nav',
  'app/shared/footer',
  'app/shared/alert-messages',
  'app/+create-wallet',
  'app/create-wallet',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

Yes, exist.

carlosfaria94 picture carlosfaria94 on 13 Jul 2016

Try adding this:

  // Thirdparty barrels.
  'rxjs',
  'bwc',

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'bwc': 'vendor/bitcore-wallet-client/bitcore-wallet-client.js',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

system-config.ts.zip

lbertenasco picture lbertenasco on 13 Jul 2016

Didn't work. In line 7 I rename 'bitcore-wallet-client' to 'bwc', In line 12 its ok using 'bitcore-wallet-client' ? I try to rename to 'bwc' and didn't work too.

carlosfaria94 picture carlosfaria94 on 13 Jul 2016

Rename bitcore-wallet-client with bwc on line 12.
You should keep the same naming you are using on import * as bwc from 'bwc';

lbertenasco picture lbertenasco on 13 Jul 2016

The same error occurs. I checked all the file.

import * as bwc from 'bwc';

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  'bwc': 'vendor/bitcore-wallet-client/bitcore-wallet-client.js'
};

/** User packages configuration. */
const packages: any = {
  'bwc':{
    format: 'cjs'
  }
};

const materialPkgs:string[] = [
  'core',
  'button',
  'grid-list',
  'input',
  'toolbar',
  'icon',
  'sidenav',
  'card',
  'list',
  'radio',
  'checkbox'
];

materialPkgs.forEach((pkg) => {
  packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`};
});

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'bwc',

  // App specific barrels.
  'app',
  'app/shared',
  'app/+send-money',
  'app/+request-money',
  'app/+activity',
  'app/shared/nav',
  'app/shared/footer',
  'app/shared/alert-messages',
  'app/+create-wallet',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'bwc': 'vendor/bitcore-wallet-client/bitcore-wallet-client.js',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });
carlosfaria94 picture carlosfaria94 on 13 Jul 2016

Ok, I tried to run it locally and I couldn't make it run.
For what I see bwc depends on these other libraries:

var _ = require('lodash');
var $ = require('preconditions').singleton();
var util = require('util');
var async = require('async');
var events = require('events');
var Bitcore = require('bitcore-lib');
var Mnemonic = require('bitcore-mnemonic');
var sjcl = require('sjcl');
var url = require('url');
var querystring = require('querystring');
var Stringify = require('json-stable-stringify');

I don't know if it's failing specifically because of this, but I'm sure you will need to include those libraries for it to properly work.

My files are as follow:

angular-cli-build.js -> Included
'bitcore-wallet-client/bitcore-wallet-client.js',

system-config.ts.zip

Including 3rd party libraries is complicated business. :confused:

lbertenasco picture lbertenasco on 13 Jul 2016

Thanks for your help @lbertenasco I will try this.

carlosfaria94 picture carlosfaria94 on 13 Jul 2016

I got similar issue with another library. I think if you don't have type definition file for the lib (e.g. .ts.d file), you have to use 

declare var bwc: any;

instead of 

import * as bwc from 'bwc'

Because import will trigger typescript to look for the module to import and you don't have that module definition, hence you got that error.

Also check your browser console to make sure bwc library is loaded. If not, you have to load it yourself before you can use it.

If you have the .ts.d file, when you use import, systemjs will load the js file for you automatically. Hope it helps.

xcompass picture xcompass on 15 Jul 2016

Unfortunately didn't work @xcompass , but thanks.

browser_adapter.ts:82 ReferenceError: bwc is not defined
    at new CreateWalletComponent (create-wallet.component.ts:23)
    at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:172)
    at DebugAppView.AppView.create (view.ts:113)
    at DebugAppView.create (view.ts:337)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.template.js:28)
    at DebugAppView.AppView.create (view.ts:113)
    at DebugAppView.create (view.ts:337)
    at ComponentFactory.create (component_factory.ts:111)
    at eval (application_ref.ts:431)
    at eval (application_ref.ts:407)

How can I build this type definition? Any sources that can I look?

carlosfaria94 picture carlosfaria94 on 16 Jul 2016

Having same problem with importing socket.io-client library, does anyone have found solution to this issue ?

zeecher picture zeecher on 18 Jul 2016

I think we need to create the typings... But the wiki is saying that is optional, can anyone confirm?

carlosfaria94 picture carlosfaria94 on 18 Jul 2016

I think typings is optional in some cases. Here is an example with steps on adding a third party library. https://github.com/daftster/d3angularcli

daftster picture daftster on 18 Jul 2016
👍2

Yes typings is optional. I updated @daftster 's example to remove the typings completely and just use declare. Though you will need to include the library yourself as shown in index.html.
https://github.com/xcompass/d3angularcli

@carlosfaria94 briefly looked at bwc code, it seems it is a node module, you may need to convert it to a browser library.

@zeecher are you using socket.io client side library: socket.io.js? if yes, either @daftster 's or my example should work. You can also install typings for socket.io to take advantage of the typings: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cc3d223a946f661eff871787edeb0fcb8f0db156/socket.io-client/socket.io-client.d.ts

xcompass picture xcompass on 18 Jul 2016

@xcompass the bwc is a node module and a browser library, I think, (they generate bitcore-wallet-client.js with Browserify) and they use with AngularJS in a production app, like this: https://github.com/bitpay/copay/blob/master/angular-bitcore-wallet-client/index.js

But in bitcore-wallet-client.js it's visible this dependencies: 

var _ = require('lodash');
var $ = require('preconditions').singleton();
var util = require('util');
var async = require('async');
var events = require('events');
var Bitcore = require('bitcore-lib');
var Mnemonic = require('bitcore-mnemonic');
var sjcl = require('sjcl');
var url = require('url');
var querystring = require('querystring');
var Stringify = require('json-stable-stringify');

I'm new in frontend development, but I think that the problem is with dependencies, how can I solve this problem? So that can I improve this library to work well with Angular.

Thanks.

carlosfaria94 picture carlosfaria94 on 25 Jul 2016

Closed as issue was made obsolete by #1455. This will be a lot easier in the upcoming PR.

filipesilva picture filipesilva on 28 Jul 2016

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

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 6 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

NCC1701M picture NCC1701M  路  3Comments
jbeckton picture jbeckton  路  3Comments
gotschmarcel picture gotschmarcel  路  3Comments
ericel picture ericel  路  3Comments
naveedahmed1 picture naveedahmed1  路  3Comments