Angular2 Material mapping issue

Question

I am using Angular2 beta with angular2-material alpha.3 they are compatible but I am having issues with mapping.

In my public/index.html i have this system setup

System.config (
            {
                packages: {
                    app: {
                        format          : 'register',
                        defaultExtension: 'js'
                    }
                },
                map: {
                    '@angular2-material/input': 'node_modules/@angular2-material/input'
                }
            }
        );
        System.import ( 'app/boot' ).then ( null, console.error.bind ( console ) );

but in one of my components when i try to import and add it to directives to use in a template as shown below:

import { Component } from 'angular2/core';
import { ControlGroup, Validators, FormBuilder } from 'angular2/common';
import { Http, Headers } from 'angular2/http';
import { ConfigService } from '../../services';
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';


@Component({
    selector: 'test-form',
    providers: [],
    templateUrl: ConfigService.APP_FOLDER + '/components/test/test.html',
    directives: [MD_INPUT_DIRECTIVES]
})

i get this error:

angular2-polyfills.js:127 GET http://localhost:8080/node_modules/@angular2-material/input 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM1191:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452 angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/@angular2-material/input

do you only config systemjs here ? if so you are not even setting up angular correclty, read the angular quick start or clone it's repository and take a look at the included system config file — mahdi mahzouni
@mahdimahzuni my tutor gave me a boilerplate he setup as I have to create a web app in a MEAN stack, and i couldn't find an angular2 beta systemjs.config.js file, so was doing manually but yea i only do it there, i was having trouble migrating from beta to rc — Jezyk Danzowki
do this then check if you have a system.config.js file and it is referenced in your main html file (ex. index.html) and see if it's content is like the one provided in this page angular.io/docs/ts/latest/… — mahdi mahzouni
@mahdimahzuni jesus you really don't understand much about the issue or ng2 then do you, the systemjs.config.js is just for looking aesthetically tidy, as you just import the JS in lol. Regardless i fixed the issue myself as i forgot to define angular2-material as packages :) — Jezyk Danzowki
no worries , you did not provide sufficent info on the matter other than a little snippet and you get upset after i got mislead ? anyway glad it got resolved — mahdi mahzouni

Jezyk Danzowki Jezyk Danzowki · Accepted Answer · 2016-07-20T13:34:29

<script>
        System.config (
            {
                map: {
                    '@angular2-material' : 'libs/@angular2-material',
                },
                packages: {
                    app: {
                        format          : 'register',
                        defaultExtension: 'js'
                    },
                    '@angular2-material/core' : {
                        main: 'core.js',
                        defaultExtension: 'js'
                    },
                    '@angular2-material/input' : {
                        main: 'input.js',
                        defaultExtension: 'js'
                    }
                }
            }
        );
        System.import ( 'app/boot' ).then ( null, console.error.bind ( console ) );
    </script>

Fixed as you need to map @angular2-material and then you need to define each package within angular2-material to its JS file.

Angular2 Material mapping issue

1 Answers