Angular2 Material 映射问题

Question

我将 Angular2 beta 与 angular2-material alpha.3 一起使用，它们是兼容的，但我遇到了映射问题。

在我的 public/index.html 我有这个系统设置

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

但是在我的一个组件中，当我尝试导入并将其添加到指令以在模板中使用时，如下所示：

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]
})

我收到这个错误：

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

Answer 1

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

已修复，因为您需要映射 @angular2-material 然后您需要将 angular2-material 中的每个包定义到它的 JS 文件。

Angular2 Material 映射问题

Angular2 Material mapping issue

systemjs

angular-material

angular