角度2では、ブートストラップに使用されるルートコンポーネントが1つ必要です。これはindex.htmlでレンダリングされます。 他のコンポーネント、サービスはmodules.tsにインポートして宣言する必要があります 例:下記のサンプルアプリケーションは、親、アプリケーション、および新しいアプリケーションの3つのコンポーネントを備えています。 modules.tsファイルでは、すべてのコンポーネントをインポートし、NgModule内で宣言する必要があります。その下には、親コンポーネントをブートストラップしています。
Modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { AppComponent } from './app.component';
import { NewAppComponent } from './newapp.component';
@NgModule({
declarations: [
ParentComponent, AppComponent, NewAppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: 'app', component: AppComponent },
{ path: 'newapp', component: NewAppComponent }
],{ useHash: true })
],
providers: [],
bootstrap: [ParentComponent]
})
export class AppModule { }
Parent.Component.ts
import { Component } from '@angular/core';
@Component({
selector: 'parent-root',
templateUrl: './parent.component.html'
})
export class ParentComponent {
}
Parent.Component.Html
Index.htmlと
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Routingapp</title>
<base href="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<parent-root>Loading...</parent-root>
</body>
</html>
親コンポーネントは、ちょうど(それはあなたのアプリケーションのホーム・ページとみなすことができる)のアプリケーションをブートストラップするために使用されます。 すべてのビュー/コンポーネントをブートストラップする必要はありません。