如何在 Angular 2 ES5 中使用 SystemJS

Question

我想写一个 angular 2 应用程序，没有 ES6/typescript，但有一个模块系统，例如SystemJS.

我写了这个应用程序（GitHub Project）并通过加载更正了错误。现在应用启动成功了，我的代码好像没有运行。我看到空站点。这是我的 SystemJS 配置：

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

我的组件在 /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;

我的模块在 /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;

我的 main.js 在 /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);
});

我没有看到任何错误，但我也没有看到我的组件。

我哪里做错了？

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

上看到该应用

如何在 Angular 2 ES5 中使用 SystemJS

How to use SystemJS with Angular 2 ES5

ecmascript-5

systemjs

angular