2016-05-12 116 views
1

我想使用angular2材料角材料。 下面是我的package.jsonangularjs 2角材料@角/核心沒有找到

{ 
    "name": "angular2-boilerplate", 
    "version": "1.0.0", 
    "scripts": { 
    "lite": "lite-server", 
    "gulp": "gulp", 
    "start": "concurrent \"npm run gulp\" \"npm run lite\" " 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular2-material/button": "^2.0.0-alpha.2", 
    "@angular2-material/checkbox": "^2.0.0-alpha.2", 
    "@angular2-material/core": "^2.0.0-alpha.2", 
    "@angular2-material/progress-circle": "^2.0.0-alpha.2", 
    "@angular2-material/toolbar": "^2.0.0-alpha.2", 
    "@angular2-material/input": "^2.0.0-alpha.2", 
    "@angular2-material/card": "^2.0.0-alpha.2", 
    "angular2": "2.0.0-beta.15", 
    "angular2-jwt": "0.1.9", 
    "cors": "2.7.1", 
    "es6-promise": "3.1.2", 
    "es6-shim": "^0.35.0", 
    "express": "4.13.4", 
    "express-jwt": "3.3.0", 
    "systemjs": "0.19.25", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.6.6" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^6.3.5", 
    "cssnano": "^3.4.0", 
    "concurrently": "^2.0.0", 
    "gulp": "^3.9.0", 
    "gulp-ext-replace": "^0.2.0", 
    "gulp-imagemin": "^2.4.0", 
    "gulp-postcss": "^6.0.1", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-typescript": "^2.10.0", 
    "gulp-uglify": "^1.5.1", 
    "lite-server": "^2.1.0", 
    "postcss": "^5.0.13", 
    "postcss-scss": "^0.1.3", 
    "precss": "^1.3.0" 
    } 
} 

tsconfig是

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "./app" 
    }, 
    "filesGlob": [ 
    "./dev/**/*.ts", 
    "!./node_modules/**/*.ts" 
    ], 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ], 
    "atom": { 
    "rewriteTsconfig": true 
    } 
} 

和SystemJs是

System.config({ 
     defaultJSExtensions: true, 
     map: { 
      "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt", 
      "angular2": "node_modules/angular2", 
      "rxjs": "node_modules/rxjs", 
      '@angular2-material/core': 'node_modules/@angular2-material/core', 
      '@angular2-material/checkbox': 'node_modules/@angular2-material/checkbox/checkbox', 
      '@angular2-material/button': 'node_modules/@angular2-material/button/button', 
      '@angular2-material/progress-circle': 'node_modules/@angular2-material/progress-circle/progress-circle', 
      '@angular2-material/card': 'node_modules/@angular2-material/card/card', 
      '@angular2-material/input': 'node_modules/@angular2-material/input/input', 
      '@angular2-material/toolbar': 'node_modules/@angular2-material/toolbar/toolbar', 
     } 
    }); 
    System.import('app/boot') 
      .then(null, console.error.bind(console)); 

每當我想在我的應用程序中使用MdButton由angular-其導入材料爲import {MdButton} from '@angular2-material/button';,我得到如下所示的錯誤

"NetworkError: 404 Not Found - http://localhost:3000/@angular/core.js" 
core.js 
Error: patchProperty/desc.set/[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:830:27 
    Zone</ZoneDelegate</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:423:24 
    Zone</Zone</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:320:29 
    ZoneTask/[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:490:29 

    Error loading http://localhost:3000/@angular/core.js as "@angular/core" from http://localhost:3000/node_modules/@angular2-material/button/button.js 


var newErr = new Error(newMsg, err.fileName, err.lineNumber); 

我看不到node_modules中的@angular文件夾。如果需要如何獲取該文件夾?
爲什麼它失敗?
注意:我的應用程序工作正常,如果我從角材刪除依賴。

回答

3

@ angular2材料的最新版本使用Angular2的rc.0版本(見changelog文件)不是一個測試版。在這兩個版本之間,Angular2的模塊被重命名爲@angular

此外還有配置Angular2(通過SystemJS配置),因爲框架不提供(還)捆綁文件的另一種方式。

請參閱此鏈接瞭解詳情:https://angular.io/docs/ts/latest/quickstart.html#!#systemjs