配置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错误:必需未定义.这是因为我的文件没有正确捆绑. 我在这里错过了什么? 解决方法
在您的情况下,系统配置中的软件包应该是“脚本”.它应该与文件夹名称匹配.因为你将它命名为’app’,所以它不会将defaultExtension’js’添加到模块文件名中
<script> System.config({ packages: { scripts: { // <--- right there format: 'cjs',console.error.bind(console)); </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |