Angular2材质映射问题答案

【问题标题】：Angular2 Material mapping issueAngular2材质映射问题
【发布时间】：2016-11-23 13:51:33
【问题描述】：

我正在使用 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（未找到）scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous函数）@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@ angular2-polyfills.js:452 angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/@angular2-material/input

【问题讨论】：

这里只配置systemjs吗？如果是这样，您甚至没有设置角度正确性，请阅读角度快速入门或克隆它的存储库并查看包含的系统配置文件
@mahdimahzuni 我的导师给了我一个他设置的样板，因为我必须在 MEAN 堆栈中创建一个 Web 应用程序，我找不到 angular2 beta systemjs.config.js 文件，所以我在做手动，但我只在那里做，我在从 beta 迁移到 rc 时遇到了麻烦
执行此操作，然后检查您是否有一个 system.config.js 文件，并且它在您的主 html 文件（例如 index.html）中被引用，并查看它的内容是否与本文中提供的内容一样页面angular.io/docs/ts/latest/…
@mahdimahzuni 耶稣你真的不太了解这个问题或 ng2 那么你呢，systemjs.config.js 只是为了看起来美观整洁，因为你只是在大声笑中导入 JS。不管我自己解决了这个问题，因为我忘记将 angular2-material 定义为包:)
别担心，除了一点sn-p之外，您没有提供足够的信息，并且在我被误导后您会生气？无论如何很高兴它得到了解决

标签： angular angular-material systemjs

【解决方案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 文件中。

【讨论】：