如何使用SystemJS和Angular 2 ES5

Question

我想寫一個沒有ES6/typescript的角度2應用程序，但是使用模塊化系統，例如， SystemJS。

我寫了這個程序（GitHub Project）並通過加載更正錯誤。 現在，應用程序啓動成功，我的代碼似乎沒有運行。我看到空的網站。 這是我SystemJS配置：

\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.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;

在

我的模塊/ 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目錄/應用main.js

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); 
 
});

我沒有看到任何錯誤，但我沒有看到我的組件了。

我做錯了什麼？

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); 

我有元數據錯誤，因爲我使用了obsoled格式。現在我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