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.
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
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.
also after upgrading angular ,I had to move directives into declaration of @NgModule. So now My appModule is:
and also I have it in systemjs.config: var map = {.. '@angular2-material': '/node_modules/@angular2-material',..}//refer to .js
and package.json:
please help me ,what is the problem ? I confused `