ng build -prod fails with angular2-material

[ghost]

ng version：
angular-cli: 1.0.0-beta.5
node: 5.10.1
os: win32 x64

angular 2.0.0-rc.1
angular2-material 2.0.0-alpha.4

---

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|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*.+(js|js.map)',
      'ng2-cookies/**/*.+(js|js.map)',
      'ng2-resource-rest/*.+(js|js.map)',
      // 'jquery/dist/*.+(js|js.map)',
      // 'tether/dist/**/*.+(js|js.map|css|css.map)',
      // 'bootstrap/**/*.+(js|js.map|css|css.map)',

    ]
  });
};

package.json

{
  "name": "code",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng server",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular2-material/button": "^2.0.0-alpha.4",
    "@angular2-material/card": "^2.0.0-alpha.4",
    "@angular2-material/checkbox": "^2.0.0-alpha.4",
    "@angular2-material/core": "^2.0.0-alpha.4",
    "@angular2-material/grid-list": "^2.0.0-alpha.4-3",
    "@angular2-material/icon": "^2.0.0-alpha.4",
    "@angular2-material/input": "^2.0.0-alpha.4",
    "@angular2-material/list": "^2.0.0-alpha.4",
    "@angular2-material/progress-bar": "^2.0.0-alpha.4",
    "@angular2-material/progress-circle": "^2.0.0-alpha.4",
    "@angular2-material/radio": "^2.0.0-alpha.4",
    "@angular2-material/sidenav": "^2.0.0-alpha.4",
    "@angular2-material/toolbar": "^2.0.0-alpha.4",
    "bootstrap": "^4.0.0-alpha.2",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.4",
    "ng2-cookies": "^0.1.9",
    "ng2-resource-rest": "^0.3.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "tether": "^1.3.2",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.5",
    "codelyzer": "0.0.19",
    "ember-cli-inject-live-reload": "^1.4.0",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  }
}

i run ng serve, it ok

but when i run ng build -prod,i got an error:

D:\code>ng build -prod
Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error tracing app/code.component.js at file:///D:/code/tmp/bundle_plugin-input_base_path-Mcx9z1mU.tmp/0/app/code.component.js
        Loading app/index.js
        Loading main.js
        Error: Unable to calculate canonical name to bundle file:///vendor/@angular2-material/sidenav/sidenav. Ensure that this module sits within the baseURL or a wildcard path config.
    at getCanonicalNamePlain (D:\code\node_modules\systemjs-builder\lib\utils.js:220:13)
    at getCanonicalName (D:\code\node_modules\systemjs-builder\lib\utils.js:145:19)
    at D:\code\node_modules\systemjs-builder\lib\trace.js:471:36

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

could you help me?
thank you very much

[Hacklone]

It throws the same for me too.

[MarkPieszak]

Potentially linked to #1052

[un33k]

Did you forget to include the mapping in system-config.ts ?

You need this:

const map: any = {
    '@angular2-material': 'vendor/@angular2-material'
};

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

};

const materialPkgs: string[] = [
  'button',
  'card',
  'checkbox',
  'core',
  'grid-list',
  'icon',
  'input',
  'list',
  'progress-bar',
  'progress-circle',
  'radio',
  'sidenav',
  'side-toggle',
  'tabs',
  'toolbar'
];

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

[ghost]

@un33k yes, i have include the mapping in system-config.ts ,but also got this error

my config:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/

System.defaultJSExtensions = true;


const components = [
  'button',
  'card',
  'checkbox',
  'grid-list',
  'icon',
  'input',
  'list',
  'progress-bar',
  'progress-circle',
  'radio',
  'sidenav',
  'slide-toggle',
  'tab-group',
  'toolbar'
];


/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material/core': '/vendor/@angular2-material/core',
};
components.forEach(name => map[`@angular2-material/${name}`] = `/vendor/@angular2-material/${name}/${name}`);


/** User packages configuration. */
const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js'
  }
};
components.forEach(name => {
  packages[`@angular2-material/${name}`] = {
    format: 'cjs',
    defaultExtension: 'js'
  };
});

[un33k]

@iloveyo123u1 You may want to have a look at this working project ( puppy-love ) as a reference.

[filipesilva]

Issue made obsolete by #1455.

[angular-automatic-lock-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.}