ang 2 with mvc 5コンポーネントをブートストラップする

Question

私たちのサイトは既存のMVCサイトであり、いくつかのパーツを追加して角度2のコンポーネントに置き換えようとしています。我々は起動する完全な角度2のアプリを持っていないので、我々は彼らが欲しいページにコンポーネントを起動するためにブートストラップを使用しているだけです。

package.jsonの依存関係を「2.0.0-rc.1」から「2.2.0」にアップデートし、最新の角度2のファイルを作成しました。私はもはや '@ angle/platform-b​​rowser-dynamic'からのimport {bootstrap}を使用せず、bootstrap（MyCountComponent、[HTTP_PROVIDERS、MyService]）;でコンポーネントを起動することができません。

{platformBrowserDynamic}を '@ angle/platform-b​​rowser-dynamic'からインポートするように更新されているようです。今すぐ起動する必要があります：platformBrowserDynamic（）。bootstrapModule（MyCountComponent、[HTTP_PROVIDERS、MyService]）;

ブラウザのコンソールエラーが表示されます。 未処理プロミス拒否：（SystemJS） 'MyCountComponent'のNgModuleメタデータが見つかりませんでした。 エラー： 'MyCountComponent'のNgModuleメタデータが見つかりません...

コンポーネントをモジュールに変換する必要がありますか、モジュールを使用しないでコンポーネントを起動するための新しい方法がありますか？

ここにコードサンプルがあります。

//mycount.ts 
import { MyService } from '../../services/my.service'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { bootstrap } from '@angular/platform-browser-dynamic' 
import { MyCountComponent } from './mycount.component'; 

bootstrap(MyCountComponent, [HTTP_PROVIDERS, MyService]); 


//mycount.component.ts 
import { Component } from '@angular/core'; 
import { NgControl } from '@angular/forms'; 
import { MyService } from '../../services/my.service'; 

@Component({ 
    selector: 'mycount', 
    templateUrl: './app/components/mycount/mycount.component.html' 
}) 

export class MyCountComponent { 

    constructor(private _myService: MyService) { 
    } 

    get mycount() { 
     return this._myService.mycount; 
    } 
} 

//systemjs.config.js 
(function (global) { 
    System.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 
      app: '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', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

EDIT 私が持っている場合：

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule 
    ], 
    bootstrap: [MyCountComponent, MyListComponent, MyDetailsComponent], 
    declarations: [MyCountComponent, MyListComponent, MyDetailsComponent], 
    exports: [MyCountComponent, MyListComponent, MyDetailsComponent], 
    providers: [MyService] 
}) 

それだけで負荷1またはコンポーネントの2に私のページには可能ですか？ 私はそれを呼び出してみました：

platformBrowserDynamic（）。bootstrapModule（MyModule、[HttpModule、MyListComponent]）;

しかし、ページに表示されていないコンポーネントタグのエラーメッセージが表示されます。

Answer 1

@NgModuleを使用してすべてのサービス、コンポーネント、ディレクティブなどをインポートできるmain @NgModuleを作成する必要があります。あなたは、どのコンポーネントをブートストラップするべきかをアプリに伝えることができます。 https://angular.io/docs/ts/latest/guide/ngmodule.html

ヒント：わずか数分でアプリの基本的な構造を作成しますAngular-cliを使用してください

は、ここでその@ngModuleこの通過してくださいを理解するための公式のリンクです。 Angular-cliを使用すると、構造化されたアプリケーションや基本的な設定を作成する必要はありません。