配置SystemJS以加载我的Angular 2组件

我正在从ng1升级到ng2.我添加了Angular 2并成功导入了它的模块:

我添加了以下配置:

现在我正在尝试添加我的第一个ng2组件/模块并导入它:

它使用TypeScript编写的组件:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my-component/my-component.html',
  styleUrls: ['app/components/my-component/my-component.css'],
  providers: [],
  directives: [],
  pipes: []
})
export default class MyComponent {

  constructor() {}

}

导入我的组件:

import MyComponent from './components/my-component/my-component';

组件的ES5编译代码是:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
var core_1 = require('angular2/core');
var MyComponent = (function () {
    function MyComponent() {
    }
    MyComponent = __decorate([
        core_1.Component({
            selector: 'my-component',
            templateUrl: 'app/components/my-component/my-component.html',
            styleUrls: ['app/components/my-component/my-component.css'],
            providers: [],
            directives: [],
            pipes: []
        })
    ], MyComponent);
    return MyComponent;
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MyComponent;

结果是寻找404错误

http://localhost:9000/scripts/components/my-component/my-component

现在,我明白我应该:

使用script标记加载我的组件文件,类似于我对Angular2软件包所做的操作.这最终导致JS错误:required未定义.这是因为我的文件不bundled正确.

配置SystemJS/Typescript,以便在不向我的html添加脚本标记的情况下加载我的模块.

我在这里错过了什么？

在您的情况下,系统配置中的软件包应该是"脚本".它应该与文件夹名称匹配.因为你将它命名为'app',所以它不会将defaultExtension'js'添加到模块文件名中