angularjs 2 与 angular-material @angular/core 未找到 [英] angularjs 2 with angular-material @angular/core not found

问题描述

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

I want to use angular2 with angular-material. Below is my 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 是

and SystemJs is

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-material 导入为 import {MdButton} from '@angular2-material/button'; ，我收到以下错误如下图

Whenever I'm trying to use MdButton in my application by importing it from angular-material as import {MdButton} from '@angular2-material/button'; , I'm getting following error as shown below

"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 中删除依赖项，我的应用程序就可以正常工作.

I couldn't see @angular folder inside node_modules. How to get that folder if required?
Why it is failing?
Note: My application works fine if i remove dependency from angular-material.

推荐答案

@angular2-material 的最后一个版本使用了 Angular2 的 rc.0 版本(参见 changelog 文件)不是测试版.在这两个版本之间，Angular2 的模块被重命名为 @angular.

Last version of @angular2-material uses the rc.0 version of Angular2 (see the changelog file) not a beta one. Between this two versions, modules of Angular2 were renamed to @angular.

此外，还有另一种配置 Angular2 的方法(通过 SystemJS 配置)，因为该框架不提供(还)捆绑文件.

Moreover there is another way to configure Angular2 (through the SystemJS configuration) since the framework doesn't provide (yet) bundled files.

查看此链接了解更多详情:https://angular.io/docs/ts/latest/quickstart.html#!#systemjs.

See this link for more details: https://angular.io/docs/ts/latest/quickstart.html#!#systemjs.

这篇关于angularjs 2 与 angular-material @angular/core 未找到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！