How to use SystemJS with Angular 2 ES5

Question

I want to write an angular 2 application without ES6/typescript, but with a modul system e.g. SystemJS.

I wrote this app (GitHub Project) and correct the error by loading. Now the app starts succefully, my code seems do not running. I see empty site. This is my SystemJS config:

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

My Component in /src/app/app.component.js

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

function MyAppComponent(){
 
} 

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

module.exports = MyAppComponent;

My Module in /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(){
 
}

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

module.exports = MyAppModule;

And my main.js in /src/app

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

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

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

I don't see any errors, but I don't see my component too.

What I make wrong?

Answer 1

I understand. Thanks for your help. I removed the "document.addEventListener". My main.js:

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

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

platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule);

I had Metadata Error, because I used obsoled format. Now my Component.js is

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

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

module.exports = MyAppComponent;

And my Module.js so:

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;

The application work fine. You can see the app on GitHub