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