Question

我想将angular2与angular-material一起使用。下面是我的package.json

{
  "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时，将其从角度材质导入为import {MdButton} from '@angular2-material/button';，我就会出现以下错误，如下所示

"NetworkError: 404 Not Found - http://localhost:3000/@angular/core.js"
core.js
Error: patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:830:27
    Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:423:24
    Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:320:29
    ZoneTask/this.invoke@http://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文件夹。如果需要，如何获取该文件夹？
为什么失败？
注意：如果我从angular-material中删除依赖项，我的应用程序工作正常。

Answer 1

@ angular2-material的最新版本使用Angular2的rc.0版本（请参阅changelog文件）而不是测试版。在这两个版本之间，Angular2的模块被重命名为@angular。

此外，还有另一种配置Angular2的方法（通过SystemJS配置），因为框架不提供（尚未）捆绑文件。

有关详细信息，请参阅此链接：https://angular.io/docs/ts/latest/quickstart.html#!#systemjs。

angularjs 2没有找到角度材料@ angular / core

1 个答案: