2016-12-11 6 views
0

私は2番めの新しいです。現在、私はまだ学習者です。私の角2のバージョンは2.1です。私は以下のように単純なファイル構造を持っている:Angular2:解決方法ComponentはNgModuleの一部ではありません...?

enter image description here

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に含まれていないか、モジュールがモジュールにインポートされていません(... )

誰でも知っていますか?

let INITIAL_COMPONENTS = [App]; 

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

ない専門家が、このリンクはhttps://github.com/angular/angular/issues/11292を助けることができることがあります – krozero

答えて

3

ではなく、オブジェクトの宣言値の配列を使用してみてください。
+0

ありがとう、これは私の問題を解決する! – ahwyX100

関連する問題