Question

我想写一个没有ES6 /打字稿的角度2应用程序，但是使用模块系统，例如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

我明白。谢谢你的帮助。我删除了＆＃34; document.addEventListener＆＃34;。我的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

上看到该应用

如何将SystemJS与Angular 2 ES5一起使用

1 个答案: