angular - XHR error (404 Not Found) loading http://localhost:3000/traceur -

i'm getting following error when i'm trying use angular material in code.

      zone.js:101 http://localhost:3000/traceur 404 (not found)scheduletask @ zone.js:101zonedelegate.scheduletask @ zone.js:345zone.schedulemacrotask @ zone.js:282(anonymous function) @ zone.js:122send @ vm437:3fetchtextfromurl @ system.src.js:1156(anonymous function) @ system.src.js:1739zoneawarepromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408zonedelegate.invoke @ zone.js:332zone.run @ zone.js:225(anonymous function) @ zone.js:591zonedelegate.invoketask @ zone.js:365zone.runtask @ zone.js:265drainmicrotaskqueue @ zone.js:497zonetask.invoke @ zone.js:437     login:15 error: error: xhr error (404 not found) loading http://localhost:3000/traceur     @ xmlhttprequest.wrapfn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)     @ zonedelegate.invoketask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)     @ zone.runtask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)     @ xmlhttprequest.zonetask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34)     error loading http://localhost:3000/traceur     error loading http://localhost:3000/node_modules/@angular2-material/button/button.js "@angular2-material/button" http://localhost:3000/app/assets/js/app.module.js(anonymous function) @ login:15zonedelegate.invoke @ zone.js:332zone.run @ zone.js:225(anonymous function) @ zone.js:591zonedelegate.invoketask @ zone.js:365zone.runtask @ zone.js:265drainmicrotaskqueue @ zone.js:497zonetask.invoke @ zone.js:437  

below code:
app.component.ts:

      import { component, viewencapsulation } '@angular/core';     import { mdbutton } '@angular2-material/button';     @component({     selector: 'myapp',     templateurl: './app/app.html',     styleurls: ['./app/app.css'],     encapsulation: viewencapsulation.none     })     export class appcomponent {     }  

app.module.ts:

      import { ngmodule } '@angular/core';     import { browsermodule } '@angular/platform-browser';     import { formsmodule }   '@angular/forms';     import { httpmodule }    '@angular/http';     import { mdbuttonmodule } '@angular2-material/button';     import { routing, approutingproviders } './app.routing';     import { appcomponent } './app.component';     import { loginmodule } './login/login.module';     import { homemodule } './home/home.module';     import { itemsmodule } './items/items.module';     import { moviesmodule } './movies/movies.module';     @ngmodule({     imports: [ browsermodule, formsmodule, httpmodule, mdbuttonmodule, routing, loginmodule, homemodule, itemsmodule, moviesmodule ],     declarations: [ appcomponent ],     providers: [ approutingproviders ],     bootstrap: [ appcomponent ],     })     export class appmodule {}  

app.routing.ts:

      import { modulewithproviders } '@angular/core';     import { routes, routermodule } '@angular/router';     const approutes: routes = [];     export const approutingproviders: any[] = [];     export const routing: modulewithproviders = routermodule.forroot(approutes);  

main.ts:

      import {platformbrowserdynamic} '@angular/platform-browser-dynamic';     import { appmodule } './app.module';     const platform = platformbrowserdynamic();     platform.bootstrapmodule(appmodule);  

system.config.js:

      /**     * system configuration angular 2 samples     * adjust necessary application needs.     */     (function (global) {     system.config({     paths: {     // paths serve alias     'npm:': 'node_modules/'     },     // map tells system loader things     map: {     // our app within app folder     app: 'app',     // angular bundles     '@angular/core': 'npm:@angular/core/bundles/core.umd.js',     '@angular/common': 'npm:@angular/common/bundles/common.umd.js',     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',     '@angular/http': 'npm:@angular/http/bundles/http.umd.js',     '@angular/router': 'npm:@angular/router/bundles/router.umd.js',     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',     '@angular2-material': 'npm:@angular2-material',     // other libraries     'rxjs':                       'npm:rxjs',     'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',     },     // packages tells system loader how load when no filename and/or no extension     packages: {     app: {     main: './main.js',     defaultextension: 'js'     },     rxjs: {     main: 'main.js',     defaultextension: 'js'     },     'angular2-in-memory-web-api': {     main: './index.js',     defaultextension: 'js'     },     '@angular2-material/core': {     main: 'core.js',     defaultextension: 'js'     },          '@angular2-material/button': {     main: 'button.js',     defaultextension: 'js'     },           '@angular2-material/card': {     main: 'card.js',     defaultextension: 'js'     }     }     });     })(this);  

as add mdbuttonmodule in imports list of "app.module.ts", start getting error.

update 2.0.0-alpha.9 cobalt-kraken (2016-09-26)

angular material has changed @angular2-material/... packages single package under @angular/material

so config might like:

(function (global) {   system.config({     paths: {       // paths serve alias       'npm:': 'node_modules/'     },     // map tells system loader things     map: {       // our app within app folder       app: 'app',       // angular bundles       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',        '@angular/material': 'npm:@angular/material/bundles/material.umd.js', <== line         ...     },     ...   }); })(this); 

and use

import { materialmodule } '@angular/material'; @ngmodule({   imports:      [ browsermodule, materialmodule ],   declarations: [ appcomponent ],   bootstrap:    [ appcomponent ] }) export class appmodule { } 

old version

starting angular2-material alpha 8 need use following configuration:

materialpackages.foreach(name => {   packages[`@angular2-material/${name}`] = {     format: 'cjs',     main: `${name}.umd.js`   }; }); 

see changelog

• https://github.com/angular/material2/blob/master/changelog.md

all: we've updated our packaging match angular/angular's packaging. if you're using systemjs in project, want switch using our umd bundles

so have change

system.config.js

packages: {   ...   '@angular2-material/core': {     format: 'cjs',     main: 'core.umd.js'   },        '@angular2-material/button': {     format: 'cjs',     main: 'button.umd.js'   },         '@angular2-material/card': {     format: 'cjs',     main: 'card.umd.js'   },   ...