jelbourn / material2-app

Simple app that consumes Angular Material 2 components
651 stars 280 forks source link

angular2-material can't be loaded after upgrading angularjs #15

Open maryamsoprano opened 7 years ago

maryamsoprano commented 7 years ago

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 commented 7 years ago

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',