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

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

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

我添加了以下配置：

<script>
        System.config({
          packages: {
            app: {
              format: 'cjs',defaultExtension: 'js'
            }
          }
        });

        System.import('scripts/bootstrap.js').then(null,console.error.bind(console));

 </script>

现在我正在尝试添加我的第一个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() {}

}

导入我的组件：

从’./components/my-component/my-component’导入MyComponent;

组件的ES5编译代码是：

var __decorate = (this && this.__decorate) || function (decorators,target,key,desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators,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,o)) || o; },desc);
    }
};
var core_1 = require('angular2/core');
var MyComponent = (function () {
    function MyComponent() {
    }
    MyComponent = __decorate([
        core_1.Component({
            selector: 'my-component',pipes: []
        })
    ],MyComponent);
    return MyComponent;
})();
Object.defineProperty(exports,"__esModule",{ value: true });
exports.default = MyComponent;

结果是寻找404错误

HTTP：//本地主机：9000 /脚本/组件/我组分/我组分

现在,我明白我应该：

>使用脚本标记加载我的组件文件,类似于我对Angular2包所做的操作.这最终导致JS错误：必需未定义.这是因为我的文件没有正确捆绑.
>配置SystemJS / Typescript,这样就可以在不向我的html添加脚本标签的情况下加载我的模块.

我在这里错过了什么？

解决方法

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

<script>
        System.config({
          packages: {
            scripts: {    // <--- right there
              format: 'cjs',console.error.bind(console));

 </script>

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

解决方法

猜你在找的Angularjs相关文章