加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:21:29 所属栏目:安全 来源:网络整理
导读:我正在从ng1升级到ng2.我添加了Angular 2并成功导入了它的模块: script src="/node_modules/systemjs/dist/system.src.js"/scriptscript src="/node_modules/rxjs/bundles/Rx.js"/scriptscript src="/node_modules/angular2/bundles/angular2.dev.js"/scrip
我正在从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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读