angular2-material can't be loaded after upgrading angularjs

[maryamsoprano]

I added angular2-material components into my project before. and It worked. But after upgrading project into latest version of angular and typescript. They have problem in loading.

(SystemJS) XHR error (404 Not Found) loading http://localhost:3002/traceur
patchProperty/desc.set/wrapFn@http://localhost:3002/node_modules/zone.js/dist/zone.js:647:26
ZoneDelegate.prototype.invokeTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:236:23
Zone.prototype.runTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:136:28
ZoneTask/this.invoke@http://localhost:3002/node_modules/zone.js/dist/zone.js:304:28

Error loading http://localhost:3002/traceur
Unable to load transpiler to transpile http://localhost:3002/node_modules/@angular2-material/checkbox/checkbox.js
Error loading http://localhost:3002/node_modules/@angular2-material/checkbox/checkbox.js as "@angular2-material/checkbox" from http://localhost:3002/app/module.js

also after upgrading angular ,I had to move directives into declaration of @NgModule. So now My appModule is:

 `

import { MdToolbar } from '@angular2-material/toolbar';

import {MdButtonToggleModule} from '@angular2-material/button-toggle/button-toggle';

import { MdButton, MdAnchor } from '@angular2-material/button';

import {MdButtonModule} from '@angular2-material/button';

import {MdCheckboxModule} from '@angular2-material/checkbox';

import {MdRadioModule} from '@angular2-material/radio';

import {MdSlideToggleModule} from '@angular2-material/slide-toggle/slide-toggle';

import {MdSidenavModule} from '@angular2-material/sidenav/sidenav';

import {MdListModule} from '@angular2-material/list/list';

import {MdGridListModule} from '@angular2-material/grid-list/grid-list';

import {MdCardModule} from '@angular2-material/card';

import {MdIconModule} from '@angular2-material/icon';

import {MdProgressCircleModule} from '@angular2-material/progress-circle/progress-circle';

import { MdCheckbox } from '@angular2-material/checkbox';`
import { MdUniqueSelectionDispatcher } from '@angular2-material/radio';

import { MdTab } from '@angular2-material/tabs';

import { MdList } from '@angular2-material/list';

import {MdInput} from '@angular2-material/input';

import { MdMenu } from '@angular2-material/menu';

//import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar/toolbar';

import {MdProgressBarModule} from '@angular2-material/progress-bar/progress-bar';

import {MdInputModule} from '@angular2-material/input/input';

import {MdTabsModule} from '@angular2-material/tabs/tabs';

import {MdToolbarModule} from '@angular2-material/toolbar';

import {MdTooltipModule} from '@angular2-material/tooltip';

import {MdRippleModule} from '@angular2-material/core/ripple/ripple';

import {PortalModule} from '@angular2-material/core/portal/portal-directives';

import {OverlayModule} from '@angular2-material/core/overlay/overlay-directives';

import {MdMenuModule} from '@angular2-material/menu/menu';

import {RtlModule} from '@angular2-material/core/rtl/dir';


const MATERIAL_MODULES = [

  MdButtonModule,

  MdButtonToggleModule,

  MdCardModule,

  MdCheckboxModule,

  //Ng2SelectModule,

  //  Ng2SelectModule,

  //  MdDialogModule,

  MdGridListModule,

  MdIconModule,

  MdInputModule,

  //MdListModule,

  MdMenuModule,

  MdProgressBarModule,

  //MdProgressCircleModule,

  MdRadioModule,

  MdRippleModule,

  MdSidenavModule,

  //  MdSliderModule,

  MdSlideToggleModule,

  MdTabsModule,

  MdToolbarModule,

  MdTooltipModule,

  OverlayModule,

  PortalModule,

  RtlModule



  // SELECT_DIRECTIVES

];



@NgModule({

  imports: [


    MATERIAL_MODULES,


    routing,



    })

  ],

  exports: [

    MATERIAL_MODULES,



  ],



  declarations: [
    MdIcon,
    MdButton,

    MdInput,

    MdTab,

    MdList,

    MdCheckbox,

    MdMenu,

    MdToolbar,

    MdIcon,

    MdDialog,
     MdRadioModule,

  ],

and also I have it in systemjs.config:
var map = {.. '@angular2-material': '/node_modules/@angular2-material',..}//refer to .js

and package.json:

`    "@angular2-material/button": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/button-toggle": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/card": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/checkbox": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/core": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/grid-list": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/icon": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/input": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/list": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/menu": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/progress-bar": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/progress-circle": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/radio": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/sidenav": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/slide-toggle": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/tabs": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/toolbar": "^2.0.0-alpha.8-experimental3",
    "@angular2-material/tooltip": "^2.0.0-alpha.8-experimental3",

please help me ,what is the problem ? I confused `

[sunshineo]

The import no longer looks like what you provided. And I think what is missing is something like this in your systemjs.config.js

'@angular/material':         'node_modules/@angular/material/material.umd.js',