Production Build Vendor Files Missing

[mb-jenks]

I've added d3.js to my project and mapped it according to the documentation. Everything works fine with the dev builds, but when I try to build for production 'ng build -prod' , the d3 files are not copied to the /dist folder. Here's my system-config.ts and angular-cli-build.js.

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'd3': 'vendor/d3/d3.js'
};

/** User packages configuration. */
const packages: any = {
};

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',
      'd3/d3.js'
    ]
  });
};

My app is unable to run in production mode because of this. Any idea?

[mb-jenks]

When I follow the steps for adding @angular2-material, the components are correctly available in the production build.

[pkamdem]

@mb-jenks
Are you using the D3 package from npm?

[mb-jenks]

Yes i'm using npm to install D3

[pkamdem]

Supposing you did...

npm install d3 --save

#Don't forget to add typings as well
typings install d3 --save;

Configure your third party dependency like this

const map: any = {
  'd3': 'vendor/d3'
};

/** User packages configuration. */
const packages: any = {
  'd3': { main: 'd3' }
};

--------------------

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

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

------------

// Make sure somewhere into your app you import and use the package
import * as d3 from 'd3';
console.log(d3); // Just for demo purpose...

Following this, running the prod build will both copy your lib in ./dist and bundle it in .dist/main.js

[mb-jenks]

Update: By adding d3 to the packages with the following information, I was able to get it to run. Thanks for the help!

  'd3': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'd3.js'
  }

[ehaydenr]

angular-cli: 1.0.0-beta.5
node: 6.2.0
os: darwin x64

Hello. I have read the docs and this thread and I am running into similar issues.

ng new d3test
cd d3test
npm install d3 --save
typings install d3 --save

I make the modifications instructed above. You can view my diff here. When building, I receive an error indicating src/app/d3test.component.ts (3, 21): Cannot find module 'd3'.

Any help is much appreciated. Thanks.

[pkamdem]

@ehaydenr
Is the d3 script copied to ./dist when building ?

[ehaydenr]

Yes. dist/vendor/d3/d3.js

[pkamdem]

Is it possible to share the project?

[ehaydenr]

I can't at the moment. Will do later this evening. It should be fairly easy to reproduce though. The steps I outlined above made only a few modifications to the ng new d3test output. Have you attempted the steps I sent?

[pkamdem]

Did a fresh install and it worked

[ehaydenr]

Tried it on my other machine and it still fails. Could it be related to the graceful-fs message?

Here's the project: https://github.com/ehaydenr/d3angular2

$ ng --version
(node:13376) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent 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: 6.2.0
os: linux x64

$ ng build
(node:13269) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
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:
  /home/ehaydenr/Documents/Code/d3test/tmp/broccoli_type_script_compiler-input_base_path-sFfjohaL.tmp/0/src/app/d3test.component.ts (3, 21): Cannot find module 'd3'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/ehaydenr/Documents/Code/d3test/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/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:5)
    at Angular2App._getTsTree (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
    at Angular2App._buildTree (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
    at new Angular2App (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/home/ehaydenr/Documents/Code/d3test/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/home/ehaydenr/Documents/Code/d3test/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/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/home/ehaydenr/Documents/Code/d3test/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)