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