I'm getting following error when I'm trying to use angular material 2 in the code:
Error Image


    zone.js:101 GET 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
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)
    at 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 as "@angular2-material/button" from 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 is the code:
app.component.ts:


    import { Component, ViewEncapsulation } from '@angular/core';
    import { MdButton } from '@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 } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { HttpModule }    from '@angular/http';
    import { MdButtonModule } from '@angular2-material/button';
    import { routing, appRoutingProviders } from './app.routing';
    import { AppComponent } from './app.component';
    import { LoginModule } from './login/login.module';
    import { HomeModule } from './home/home.module';
    import { ItemsModule } from './items/items.module';
    import { MoviesModule } from './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 } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    const appRoutes: Routes = [];
    export const appRoutingProviders: any[] = [];
    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts:


    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);

system.config.js:


    /**
    * System configuration for Angular 2 samples
    * Adjust as necessary for your application needs.
    */
    (function (global) {
    System.config({
    paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
    // our app is within the 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 the System loader how to 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 soon as I add 'MdButtonModule' in imports list of "app.module.ts", I start getting the error. Thanks in advance.

Regards, Shashank

share|improve this question
    
What is your package.json look like? – yurzui Sep 13 at 4:36
up vote 3 down vote accepted

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

Angular Material has changed from @angular2-material/... packages to a single package under @angular/material

So your config might look like:

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the 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/material.umd.js', <== this line

       ...
    },
    ...
  });
})(this);

And use it like

import { MaterialModule } from '@angular/material';
@NgModule({
  imports:      [ BrowserModule, MaterialModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Old version

Starting with angular2-material alpha 8 you need to use the following configuration:

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

See also the changelog

all: we've updated our packaging to match angular/angular's packaging. If you're using SystemJS in your project, you will probably want to switch to using our UMD bundles

So you have to change your

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'
  },
  ...
share|improve this answer
    
This resolved the issue. Thank you :) – Shashank Sachan Sep 16 at 19:56
    
@Shashank: if it resolved your issue, please mark this as the selected answer. – Steve Sep 17 at 23:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.