Angular4：無法編譯：參數類型{路徑：串，組分HomeComponent} []是不能分配給參數類型路由

Question

我試圖建立路由首次上角4：

我app.module.ts代碼：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { ProductComponent } from './product/product.component'; 
import { MembersComponent } from './members/members.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProductComponent, 
    MembersComponent 
    ], 
    imports: [ 
    BrowserModule, 
    NgModule, 
    RouterModule.forRoot([ 
    { 
     path: 'member', 
     component: 'MembersComponent' 
    }, 
    { 
     path: 'product', 
     component: 'ProductComponent' 
    } 
    ]) 

    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

我得到的錯誤：

Argument of type '{ path: string; component: string; }[]' is not assignable to parameter of type 'Route[]'. Type '{ path: string; component: string; }' is not assignable to type 'Route'. Types of property 'component' are incompatible. Type 'string' is not assignable to type 'Type'.

Answer 1

路線是這樣定義的：

export interface Route { 
    path?: string; 
    component?: Type<any>; 

其中Type的定義如下：

export declare const Type: FunctionConstructor; 

所以必須指定參考組件類（這是一個函數的構造）在路徑定義，不串：

component: 'MembersComponent' <---------- should be component class reference 

所以導入MembersComponent，並把它像這樣：

import { MembersComponent } from '...' 
... 
    RouterModule.forRoot([ 
    { 
     path: 'member', 
     component: MembersComponent 
    }, 

Answer 2

JUST FOR REFERENCE

在組件級進行更改之後我得到這個錯誤

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { ProductComponent } from './product/product.component'; 
import { MembersComponent } from './members/members.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProductComponent, 
    MembersComponent 
    ], 
    imports: [ 
    BrowserModule, 
    NgModule, 
    RouterModule.forRoot([ 
    { 
     path: 'member', 
     component: MembersComponent 
    }, 
    { 
     path: 'product', 
     component: ProductComponent 
    } 
    ]) 

    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

SOLUTION：

REFERENCE LINK