Angular2: Как разрешить компонент не является частью какого-либо 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{}