typescript 配置 SystemJS 以加载我的 Angular 2 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34433300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Configure SystemJS to load my Angular 2 component
提问by Yaniv Efraim
I am upgrading from ng1 to ng2. I added Angular 2 and successfully imported its modules:
我正在从 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>
I added the following config:
我添加了以下配置：
<script>
System.config({
packages: {
app: {
format: 'cjs',
defaultExtension: 'js'
}
}
});
System.import('scripts/bootstrap.js').then(null, console.error.bind(console));
</script>
Now I am trying to add my first ng2 component/ module and to import it:
现在我正在尝试添加我的第一个 ng2 组件/模块并导入它：
The component it written using TypeScript:
它使用 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() {}
}
importing my component:
导入我的组件：
import MyComponent from './components/my-component/my-component';
import MyComponent from './components/my-component/my-component';
And component's ES5 compiled code is:
并且组件的 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;
The result is a 404 error looking for
结果是 404 错误寻找
http://localhost:9000/scripts/components/my-component/my-component
http://localhost:9000/scripts/components/my-component/my-component
Now, I understand that I should either:
现在，我明白我应该：
- Load my component file using
scripttag, similar to what I did with Angular2 bundles. This ends up with a JS error:requiredis undefined. This is because my file is notbundledcorrectly. - Config SystemJS / Typescript so it will know to load my module without adding a script tag to my html.
- 使用
script标签加载我的组件文件，类似于我对 Angular2 包所做的。这最终会导致 JS 错误：required未定义。这是因为我的文件不bundled正确。 - 配置 SystemJS / Typescript，这样它就会知道加载我的模块，而无需在我的 html 中添加脚本标签。
What am I missing here?
我在这里错过了什么？
回答by Poul Kruijt
The packages in the System config should be 'scripts' in your case. It should match the folder name. Because you have it named 'app', it does not add the defaultExtension 'js' to the modules filename
在您的情况下，系统配置中的包应该是“脚本”。它应该与文件夹名称匹配。因为您将它命名为“app”，所以它不会将 defaultExtension 'js' 添加到模块文件名中
<script>
System.config({
packages: {
scripts: { // <--- right there
format: 'cjs',
defaultExtension: 'js'
}
}
});
System.import('scripts/bootstrap.js').then(null, console.error.bind(console));
</script>
