CODEWITHSUNDEEP
angularangular-material
Krishna
Krishna

Reputation: 1985

angularjs 2 with angular-material @angular/core not found

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 is

{
  "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
  }
}

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));

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);

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.

Upvotes: 1

Views: 5153

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202138

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.

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

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

Upvotes: 3

Related Questions