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获取http://localhost:8080/node_modules/@angular2-material/input 404（未找到）scheduleTask @ angular2-polyfills.js：127ZoneDelegate.scheduleTask @ angular2-polyfills.js：362Zone.scheduleMacroTask @ angular2-polyfills.js：299 （匿名函数）@ angular2-polyfills.js：148send @ VM1191：3fetchTextFromURL @system.src.js：1154（匿名函数）@system.src.js：1735ZoneAwarePromise @ angular2-polyfills.js：610（匿名函数）@system .src.js：1734（匿名函数）@system.src.js：2759（匿名函数）@system.src.js：3333（匿名函数）@system.src.js：3600（匿名函数）@system.src .js：3985（匿名函数）@ system.src.js：4448（匿名函数）@system.src.js：4700（匿名函数）@system.src.js：406ZoneDelegate.invoke @ angular2-polyfills.js：349Zone .run @ angular2-polyfills.js：242（匿名函数）@ angular2-polyfills.js：597ZoneDelegate.invokeTask @ angular2-polyfills.js：382Zone.runTask @ angular2-polyfills.js：282drainMicroTaskQueue @ angular2-polyfills.js：500ZoneTask .invoke @ angu LAR2-polyfills.js：452 angular2-polyfills.js：349错误：错误：XHR错误（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材质映射问题

1 个答案: