Importing adhoc 3rd party lib fail

[derailed]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

angular-cli: 1.0.0-beta.4
node: 5.7.0
os: darwin x64

1. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.
2. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

App created with ng-cli

1 - npm install phoenix_js --save

2 - Update system-config.ts

const map: any = {
"phoenix_js": "vendor/phoenix_js/dist/phoenix.js"
};

const packages: any = {
"phoenix_js": {
"format": "cjs",
"defaultExtension": "js",
"main": "index",
}

3 - Update angular-cli-build.js

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'phoenix_js/dist/phoenix.js',
]
});
};

4 - Update main.ts

import { Socket } from 'phoenix_js'

1. The log given by the failure. Normally this include a stack trace and some
   more information.

Error: Typescript found the following errors:
./tmp/broccoli_type_script_compiler-in
main.ts (6, 24): Cannot find module 'phoenix_js'.
at BroccoliTypeScriptCompiler._doIncrementalBuild (./node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
at BroccoliTypeScriptCompiler.build (./node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)

...

1. Mention any other details that might be useful.

   ---

   Thanks! We'll be in touch soon.

I did see the post about integrating 3rdparty libs but only includes moment and material -> No help for adhoc thirdparty lib inclusions.

Stuck! Thanks for your help.

[prashanthcvvp]

I tried with d3. I am stuck in the same place. I am not able to import third party library.

[nfantone]

Same over here with ng2-charts. Can't make this work, either.

[serhiisol]

use this link https://github.com/angular/angular-cli/wiki/3rd-party-libs that works perfectly

be sure that you've pointed correctly all necessary files in vendorNpmFiles in angular-cli-build.js
same for map and packages in system-config.ts

[nfantone]

@SergeySolonko Clearly, that wiki page didn't help one bit. Was the first thing I read. Wouldn't be writing a comment here, otherwise.

For the record, after hours of pointlessly staring at my screen in bewilderment, I managed to make ng2-charts work. Here's a summary of what I did:

Configure URLs and packages

Edit system-config.ts and have it declare ng2-charts and all its dependencies. Manually. The only way of knowing which dependencies are those, AFAIK, is running your application and keep track of all 404 you'll get. Or dig out each package.json for a list. Once you do that, repeat the step for the dependencies of the dependencies.

After some trial and error, I figured out ng2-charts depends on color-name, color-convert and chart.js. In turn, chart.js depends on chartjs-color, chartjs-color-string and moment.

So, you need to follow all steps on the wiki guide for each one of those.

Also, bear in mind that deps may be bundled or distributed differently. So when configuring them, you need to specify their correct format.

In the end, my system-config.ts looked like this:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'ng2-charts': 'vendor/ng2-charts',
  'chartjs': 'vendor/chart.js/dist/Chart.bundle.min.js',
  'color-name': 'vendor/color-name/index.js',
  'color-convert': 'vendor/color-convert/index.js',
  'chartjs-color': 'vendor/chartjs-color/dist/color.js',
  'chartjs-color-string': 'vendor/chartjs-color-string/color-string.js',
  'moment': 'vendor/moment/moment.js'
};

/** User packages configuration. */
const packages: any = {
  'ng2-charts': { defaultExtension: 'js', main: 'ng2-charts.js' },
  'chartjs': { defaultExtension: 'js', format: 'cjs' }
};

Update your CLI build

Add the following to the angular-cli-build.js file on the vendorNpmFiles array:

      'color-name/**/*.+(js|js.map)',
      'color-convert/**/*.+(js|js.map)',
      'chart.js/dist/Chart.bundle.min.js',
      'chartjs-color/dist/color.js',
      'chartjs-color-string/color-string.js',
      'ng2-charts/**/*.+(js|js.map)',
      'moment/moment.js'

Manually import charts.js

You need to import 'chartjs'; somewhere in your application to make System.js load Chart.js. I did that on my root component. Otherwise, ng2-chart will just fail silently.

---

So, all in all, the state of the art looks very bleak presently. At least for me. Unless I'm missing something important or doing something terribly wrong, this is right-down unusable. Whatever we are doing to Javascript needs to stop. Now.

(Ok, that was a joke... but really, this is very cumbersome).

[serhiisol]

in your example above #845 (comment) where is the reference to phoenix_js ?

[abeytom]

I tried the same steps at https://github.com/angular/angular-cli/wiki/3rd-party-libs with moment and d3. moment worked fine, however d3 failed with message Cannot find module 'd3'

ng init
npm install moment d3 --save
typings install d3 moment --ambient --save

file: *angular-cli-build.js*
vendorNpmFiles: [
      ...
      ..,
      'd3/d3.js',
      'moment/moment.js'
    ]

file: *system-config.ts*
const map: any = {
  'd3':'vendor/d3/d3.js',
  'moment':'vendor/moment/moment.js'
};

import * as d3 from 'd3';
import * as moment from 'moment';

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/abey.tom/github/abeytom/ext-test/tmp/broccoli_type_script_compiler-input_base_path-1lxf3vVu.tmp/0/src/app/ext-test.component.ts (2, 21): Cannot find module 'd3'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/abey.tom/github/abeytom/ext-test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at doNTCallback0 (node.js:417:9)
    at process._tickCallback (node.js:346:13)

[filoxo]

I found that you need to run ng build or ng serve at least once before attempting to import the third-party lib in a component (so between steps 4 and 5 in the wiki). This first run will actually copy the script file to /dist. The CLI probably needs to change the build order to copy those vendor files over before compiling.

Also I noticed that the wiki omits the fact that you also need to drop a <script> tag into index.html pointing to the lib, the src being something like vendor/lib/script.js.

Only after doing these things was I then able to successfully import a third-party lib into my component(s).

[nfantone]

@SergeySolonko I wasn't trying to add phoenix_js as a dependency, but ng2-charts.

[nfantone]

@filoxo

Also I noticed that the wiki omits the fact that you also need to drop a <script> tag into index.html pointing to the lib, the src being something like vendor/lib/script.js.

No, you don't. The whole "five step process" is to, actually, avoid using a <script> tag. System.js will load the script for you.

[prashanthcvvp]

I pasted the typing for d3 in the browser and main folder (typings/browser and typings/main). and added the reference in main.d.ts and browser.d.ts. and added the map file in index.html file. It worked for me.

The same procedure worked for me with lodash

[filoxo]

@nfanton yea, good call. I've just been battling this for long enough that I forgot the purpose of registering the lib with system.js.

[nfantone]

@filoxo You are not in this fight alone, my man.

[filipesilva]

A bit late to the party, but is anyone still having trouble importing 3rd party libs here?

[nfantone]

@filipesilva Did you ditch SystemJS entirely 😛? No? Then, yes. Using any fancy module loader makes adding stuff incredibly bothersome.