SystemJSをAngular 2で使用する方法ES5

Question

ES6/typescriptなしでmodulシステムを使用して、角度2のアプリケーションを作成したいとします。 SystemJS。

このアプリ（GitHub Project）を書き込んでエラーを修正しました。 アプリが順調に起動し、コードが実行されていないようです。私は空のサイトを参照してください。 これは私のSystemJSの設定です：に/src/app/app.component.js

var ngCore = require('@angular/core'); 
 

 
function MyAppComponent(){ 
 
\t 
 
} 
 

 
MyAppComponent.annotations = [ 
 
\t ngCore.Component({ 
 
\t \t selector: 'my-app', 
 
\t \t template: '<h1>Hello Angular</h1>' 
 
\t }) 
 
]; 
 

 
module.exports = MyAppComponent;

に私のモジュール

\t \t \t SystemJS.config({ 
 
\t \t \t \t paths: { 
 
\t \t \t \t \t // paths serve as alias 
 
\t \t \t \t \t 'npm:': '../node_modules/' 
 
\t \t \t \t }, 
 
\t \t \t \t // map tells the System loader where to look for things 
 
\t \t \t \t map: { 
 
\t \t \t \t \t // our app is within the app folder 
 
\t \t \t \t \t 'my-app': '.', 
 
\t \t \t \t \t // angular bundles 
 
\t \t \t \t \t '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
 
\t \t \t \t \t '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
 
\t \t \t \t \t '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
 
\t \t \t \t \t '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
 
\t \t \t \t \t '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
 
\t \t \t \t \t '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
 
\t \t \t \t \t '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
 
\t \t \t \t \t '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
 
\t \t \t \t \t // other libraries 
 
\t \t \t \t \t 'rxjs':      'npm:rxjs', 
 
\t \t \t \t \t 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
 
\t \t \t \t }, 
 
\t \t \t \t // packages tells the System loader how to load when no filename and/or no extension 
 
\t \t \t \t packages: { 
 
\t \t \t \t \t app: { 
 
\t \t \t \t \t \t main: './app/main.js', 
 
\t \t \t \t \t \t defaultExtension: 'js' 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t rxjs: { 
 
\t \t \t \t \t \t defaultExtension: 'js' 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t 'angular2-in-memory-web-api': { 
 
\t \t \t \t \t \t main: './index.js', 
 
\t \t \t \t \t \t defaultExtension: 'js' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t });

マイコンポーネント/ src/app/app.module.js

var ngCore = require('@angular/core'); 
 
var platformBrowser = require('@angular/platform-browser'); 
 

 
var AppComponent = require('my-app/app/app.component.js'); 
 

 
function MyAppModule(){ 
 
\t 
 
} 
 

 
MyAppModule.annotations = [ 
 
\t ngCore.NgModule({ 
 
\t \t imports: [ platformBrowser.BrowserModule ], 
 
\t \t declarations: [ AppComponent ], 
 
\t \t bootstrap: [ AppComponent ] 
 
\t }) 
 
]; 
 

 
module.exports = MyAppModule;

および/ SRC /アプリ

var platformBrowserDynamic = require('@angular/platform-browser-dynamic'); 
 

 
var AppModule = require('my-app/app/app.module.js'); 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
\t platformBrowserDynamic 
 
\t \t .platformBrowserDynamic() 
 
\t \t .bootstrapModule(AppModule); 
 
});

の私main.js私はすべてのエラーが表示されていないが、私はあまりにも私のコンポーネントが表示されません。

私は間違っていますか？

Answer 1

わかりました。ご協力いただきありがとうございます。私は "document.addEventListener"を削除しました。私のmain.js：

var platformBrowserDynamic = require('@angular/platform-browser-dynamic'); 

var AppModule = require('my-app/app/app.module.js'); 

platformBrowserDynamic 
    .platformBrowserDynamic() 
    .bootstrapModule(AppModule); 

私は失効フォーマットを使用していたので、メタデータエラーが発生しました。今、私のComponent.jsは

var ngCore = require('@angular/core'); 

MyAppComponent = ngCore.Component({ 
    selector: 'my-app', 
    template: '<h1>Hello Angular</h1>' 
}).Class({ 
    constructor: function(){ 
    } 
}); 

module.exports = MyAppComponent; 

ですので、私のModule.js：

var ngCore = require('@angular/core'); 
var platformBrowser = require('@angular/platform-browser'); 

var AppComponent = require('my-app/app/app.component.js'); 


MyAppModule = ngCore.NgModule({ 
    imports: [ platformBrowser.BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}).Class({ 
    constructor: function(){ 
    } 
}); 


module.exports = MyAppModule; 

アプリケーションの作業罰金。あなたはアプリケーションを見ることができますGitHub