Không cung cấp cho RouterOutletMap

Question

2.0.0 góc mới và thông qua mới nhất góc-cli 1.0.0-beta.14, nút: 6.6.0, os: linux x64

Những gì tôi làm:

1) tạo dự án mới

ng new angular-test 
ng g component projects 
ng g component typings 

2) Thêm đơn giản routing

/src/app/app.component.html

<router-outlet></router-outlet> 

/src/app/app.module.ts

export const ROUTES: Routes = [ 
    { 
    path: '', 
    redirectTo: '/projects', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'projects', 
    component: ProjectsComponent, 
    }, 
    { 
    path: '/typings', 
    component: TypingsComponent 
    }, 
    { 
    path: '**', redirectTo: '' 
    } 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProjectsComponent, 
    TypingsComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forChild(ROUTES) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Những gì tôi nhận được:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:0 caused by: No provider for RouterOutletMap! 
ORIGINAL EXCEPTION: No provider for RouterOutletMap! 

Làm thế nào tôi đã cố gắng để sửa lỗi này

Tôi cố gắng thêm RouterOutletNhập bản đồ cho các nhà cung cấp trong AppModule, ngoại lệ không ném, nhưng ứng dụng không chuyển hướng đến các dự án và không hiển thị các thành phần lồng nhau

Answer 1

Bạn cần gọi số RouterModule.forRoot cho mô-đun ứng dụng, chứ không phải forChild. Trước đây là adds all the core providers, trong khi the latter doesn't. Bạn nên sử dụng forChild cho mô-đun con, không phải mô-đun ứng dụng.

Answer 2

Tôi cũng gặp sự cố này và. đây là cách tôi tránh điều đó ..... một thời gian điều này sẽ được giúp đỡ. lời chúc tốt đẹp nhất!

Mảng Routing - app.routes.ts

const appRoutes:Routes =[ 
{ 
    path: 'home', 
    component: CarouselComponent 
}, 
{ 
    path: 'profile', 
    component:UserDashboardComponentComponent, 
    children: [ 
    { 
     path: 'overview', 
     component: ProfileOverviewComponent 
    }, 
    { 
     path: 'post', 
     component: PostAddComponent 
    } 
    ] 
    } 
]; 

export const WebRouting: ModuleWithProviders =RouterModule.forRoot(appRoutes); 

app.module.ts

@NgModule({ 
declarations: [ 
    AppComponent, 
    CarouselComponent, 
    ....... 
], 
imports: [ 
    BrowserModule, 
    MdTabsModule, 
    MaterialModule, 
    MdInputModule, 
    BrowserAnimationsModule, 
    FormsModule, 
    HttpModule, 
    WebRouting 
], 
providers: [], 
bootstrap: [AppComponent], 
}) 

export class AppModule { } 

tempale.html

<li> 
    <a [routerLink]="['/profile/overview']" routerLinkActive="active" > 
     Overview 
    </a> 
    </li> 
    <li> 
    <a [routerLink]="['/profile/post']"routerLinkActive="active"> 
     PostAdd 
    </a> 
    </li>