2016-02-26 93 views
0

我试图加载以下transpiled JS-捆绑的 “主” 模块 “的应用程序,0.1.0.min.js” 的具体模块:SystemJS导入打字稿束

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); 
 
}; 
 
System.register("app.component", ['angular2/core'], function(exports_1, context_1) { 
 
    "use strict"; 
 
    var __moduleName = context_1 && context_1.id; 
 
    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); 
 
    } 
 
    } 
 
}); 
 
System.register("main", ['angular2/platform/browser', "app.component"], function(exports_2, context_2) { 
 
    "use strict"; 
 
    var __moduleName = context_2 && context_2.id; 
 
    var browser_1, app_component_1; 
 
    return { 
 
    setters: [ 
 
     function(browser_1_1) { 
 
     browser_1 = browser_1_1; 
 
     }, 
 
     function(app_component_1_1) { 
 
     app_component_1 = app_component_1_1; 
 
     } 
 
    ], 
 
    execute: function() { 
 
     browser_1.bootstrap(app_component_1.AppComponent); 
 
    } 
 
    } 
 
}); 
 

 
//# sourceMappingURL=app-0.1.0.min.js.map

Transpiled这个 “tsconfig.json”:

{ 
 
    "compilerOptions": { 
 
    "target": "es5", 
 
    "module": "system", 
 
    "moduleResolution": "node", 
 
    "sourceMap": true, 
 
    "emitDecoratorMetadata": true, 
 
    "experimentalDecorators": true, 
 
    "removeComments": true, 
 
    "noImplicitAny": false, 
 
    "sortOutput": true, 
 
    "outFile": "app-0.1.0.min.js" 
 
    }, 
 
    "exclude": [ 
 
    "node_modules", 
 
    "typings/main", 
 
    "typings/main.d.ts" 
 
    ] 
 
}

最后,我使用angular2入门教程中的SystemJS实现,但它不适用于我,因为角度应用程序尚未加载。

<script src="js/app-0.1.0.min.js"></script> 
 

 
<!-- 3. Configure SystemJS --> 
 
<script> 
 
    System.config({ 
 
    packages: { 
 
     js: { 
 
     format: 'register', 
 
     defaultExtension: 'js' 
 
     } 
 
    } 
 
    }); 
 
    System.import('js/app-0.1.0.min.js') //System.import('js/app-0.1.0.min') 
 
    .then(null, console.error.bind(console)); 
 
</script> 
 

 
<!-- 4. Display the application --> 
 
<body> 
 
    <my-app>Loading...</my-app> 
 
</body>

任何想法表示赞赏得到这个应用程序的运行。

回答

0

您已经与加载脚本:

<script src="js/app-0.1.0.min.js"></script> 

您不必再加载它们与System.import,而应该导入引导模块

System.import('main') 
    .then(null, console.error.bind(console)); 
+0

现在我得到这个:“EXCEPTION:选择器'我的应用程序'不匹配任何元素”。 – TwoFive5even

+0

这是一个不同的问题。尝试将脚本移动到“”末尾,在“”下面。 – Sasxa

0

System.import( 'JS/APP-0.1.0.min')

<script src="js/app-0.1.0.min.js"></script> 

<!-- 3. Configure SystemJS --> 
<script> 
    System.config({ 
    packages: { 
     js: { 
    format: 'register', 
    defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('js/app-0.1.0.min') 
    .then(null, console.error.bind(console)); 
</script> 
+0

我试过了,在静止stucking“载入中...”屏幕。 – TwoFive5even