Angular2：如何解析Component不是任何NgModule的一部分......？

Question

我是棱角分明的新手2.目前我仍然是学习者。我的角度2版本是2.1。我有一个简单的文件结构如下：

app.ts 的内容如下：

import { Component } from "@angular/core";

@Component({
    selector: 'my-app',
    template: `
        <a>Hello</a>
        <a>About</a>
`})
export class App { }

嗯，这很简单。 helloSolarSystem.ts 的内容如下：

import { NgModule, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { App } from 'components/app';

let INITIAL_COMPONENTS = { App };

@NgModule({
    imports: [ BrowserModule
    ],
    declarations: INITIAL_COMPONENTS,
    bootstrap: [App]
})
class HelloSolarSystemModule extends Type{}

platformBrowserDynamic().bootstrapModule(HelloSolarSystemModule);

这也很简单， config.js 的内容如下：

System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
    emitDecoratorMetadata: true
},
paths: {
    //'npm:': 'https://unpkg.com/'
    'npm:': 'node_modules/'
},
//map tells the System loader where to look for things
map: {

    'app': './src',
    'components': './components',
    'config': './config',

    '@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',

    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

    'rxjs': 'npm:rxjs'
},
//packages defines our app package
packages: {
    app: {
        main: 'helloSolarSystem.ts',
        defaultExtension: 'ts'
    },

    components : {
        defaultExtension: 'ts'
    },

    rxjs: {
        defaultExtension: 'js'
    }
}

}）;

没有太大的魔力。但是，当我在浏览器中运行index.html时，控制台将返回： zone.js：232错误：（SystemJS）组件应用程序不是任何NgModule的一部分，或者该模块尚未导入您的模块。（...）

有人知道为什么吗？

Answer 1

尝试使用数组作为声明值而不是对象：

let INITIAL_COMPONENTS = [App];

@NgModule({
    imports: [BrowserModule],
    declarations: INITIAL_COMPONENTS,
    bootstrap: [App]
})
class HelloSolarSystemModule extends Type{}