javascript - Angular2 : How to resolve Component is not part of any NgModule . ..？

Question

我是 Angular 2 的新手。目前我还是一个学习者。我的 Angular 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{}