使用SystemJS加载组合的模块化打字稿文件 [英] Load combined modular typescript file with SystemJS
本文介绍了使用SystemJS加载组合的模块化打字稿文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在遵循基本的 Angular2实现.使用TypeScript v1.8时，它应该是
I have been following the basic Angular2 implementation. With TypeScript v1.8 it should be possible to use system module with outfile so we can generated a combined file instead of multiple javascript files. I have a problem with SystemJS trying to load the combined file as I don't know exactly what parameters it needs (I've tried various combinations...) but I don't get any console errors and AngularJS isn't initialized.
这是已转译的外档文件
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
System.register("main", ["app.component", 'angular2/platform/browser'], function(exports_2) {
"use strict";
var app_component_1, browser_1;
return {
setters:[
function (app_component_1_1) {
app_component_1 = app_component_1_1;
},
function (browser_1_1) {
browser_1 = browser_1_1;
}],
execute: function() {
browser_1.bootstrap(app_component_1.AppComponent);
}
}
});
System.register("app.component", ['angular2/core'], function(exports_1) {
"use strict";
var core_1;
var AppComponent;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
}],
execute: function() {
AppComponent = (function () {
function AppComponent() {
}
AppComponent = __decorate([
core_1.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
}),
__metadata('design:paramtypes', [])
], AppComponent);
return AppComponent;
}());
exports_1("AppComponent", AppComponent);
}
}
});
//# sourceMappingURL=all.js.map
这是我的tsconfig
This is my tsconfig
{
"scripts": {
"postinstall": "npm run typings install"
},
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"outDir": "../wwwroot/",
"module": "system",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"rootDir": ".",
"outFile": "../wwwroot/dist/main.js"
},
"exclude": [
"node_modules",
]
}
这是html代码
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="lib/es6-shim.min.js"></script>
<script src="lib/system-polyfills.js"></script>
<script src="lib/angular2-polyfills.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('dist/main.js')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
推荐答案
解决方案非常简单.我需要在头中包含生成的js文件:
The solution was rather simple. I need to include the generated js file in the head:
<script src="dist/main.js"></script>
并保留原始的SystemJS代码:
and keep the original SystemJS code:
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
这篇关于使用SystemJS加载组合的模块化打字稿文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
