SystemJS導入打字稿束

我試圖加載以下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>

任何想法表示讚賞得到這個應用程序的運行。

來源

2016-02-26 TwoFive5even

您已經與加載腳本：

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

您不必再加載它們與System.import，而應該導入引導模塊

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

來源

2016-02-28 01:09:39 Sasxa

現在我得到這個：「EXCEPTION：選擇器'我的應用程序'不匹配任何元素」。 – TwoFive5even

這是一個不同的問題。嘗試將腳本移動到「」末尾，在「」下面。 – Sasxa

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>

來源

2016-02-27 01:10:31 guyoung

我試過了，在靜止stucking「載入中...」屏幕。 – TwoFive5even

SystemJS導入打字稿束

回答

相關問題