Angular-cli: prod build/serve fails with angular2-material

[deebloo]

1. Operating system
   Mac OSX El Capitan
2. Versions.
   angular-cli: 1.0.0-beta.5
   node: 4.4.5
   os: darwin x64
3. Repro steps.

ng new test-app
npm install --save @angular2-material/core
npm install --save @angular2-material/checkbox

angular-cli-build.js:

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|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*.js'
    ]
  });
};

src/system-config.ts

/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material'
};

/** User packages configuration. */
const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  },
  '@angular2-material/checkbox': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'checkbox.js'
  }
};

...

src/app/test-app.component.ts

import { Component } from '@angular/core';
import { MD_CHECKBOX_DIRECTIVES } from '@angular2-material/checkbox';

@Component({
  moduleId: module.id,
  selector: 'test-app-app',
  directives: [MD_CHECKBOX_DIRECTIVES],
  templateUrl: 'test-app.component.html',
  styleUrls: ['test-app.component.css']
})
export class TestAppAppComponent {
  title = 'test-app works!';
}

ng build -prod

1. The log given by the failure.

Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for vendor/@angular2-material/checkbox/checkbox.js at file:///Users/dannyblue/Documents/projects/test-app/tmp/bundle_plugin-input_base_path-L2OPG5Mp.tmp/0/vendor/@angular2-material/checkbox/checkbox.js
    Loading app/test-app.component.js
    Loading app/index.js
    Loading main.js
    Error: ENOENT: no such file or directory, open '/Users/dannyblue/Documents/projects/test-app/tmp/bundle_plugin-input_base_path-L2OPG5Mp.tmp/0/vendor/@angular2-material/checkbox/usr/local/google/home/jelbourn/material2/tmp/broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp/0/components/checkbox/checkbox.js.map'
    at Error (native)

The broccoli plugin was instantiated at: 
    at BundlePlugin.Plugin (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BundlePlugin.CachingWriter [as constructor] (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BundlePlugin (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:11:10)
    at Angular2App._getBundleTree (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:421:22)
    at Angular2App._buildTree (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:159:21)
    at new Angular2App (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/dannyblue/Documents/projects/test-app/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/dannyblue/Documents/projects/test-app/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

1. Mention any other details that might be useful.
   Other 3rd party libs like moment are working fine. I am not sure why this would only be happening with angular2-material. running things in dev mode works fine (ng server and ng build). It is happening with any and all angular2 material components. the components themselves seem to be working just fine.

[sphanley]

Can confirm, I'm experiencing this in my project as well. There appear to be a handful of open issues currently that all describe similar problems with production builds.

[deebloo]

Ive been digging around the build task but I can't figure out whats wrong. especially since it isn't happening with all 3rd party libs

[benjaminkitt]

I'm having this problem too. Note this line from log:

'/Users/dannyblue/Documents/projects/test-app/tmp/bundle_plugin-input_base_path-L2OPG5Mp.tmp/0/vendor/@angular2-material/checkbox/usr/local/google/home/jelbourn/material2/tmp/broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp/0/components/checkbox/checkbox.js.map'

See how that's referencing @jelbourn's path? There are sourceMappingURLs all over material2 that reference that path. Could that be tripping things up?

Edit: See: angular/material2#541

Stripping out the incorrect sourcemap refs will temporarily fix. Quick cmds to do so:

Linux:

cd ./node_modules/@angular2-material
find . -type f -exec sed -i 's/\/\/# \S*jelbourn\/material2\S*/ /g' {} +

FreeBSD/OSX:

cd ./node_modules/@angular2-material
find . -type f -exec sed -i '' 's/\/\/# \S*jelbourn\/material2\S*/ /g' {} +

[deebloo]

I didn't notice that! Ill confirm and then close this issue

[deebloo]

@benjaminkitt I have confirmed that this is the issue. (I couldn't get your script to work though). Since this does indeed seem to be an issue with angular2-material and not with angular-cli I am closing this issue

[julienboulay]

@benjaminkitt : thanks !! It fixed the issue

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